如何解决无法基于ReactJS中堆积条形图的数据动态更改y轴值
我的目标,用于在图表中动态显示y轴值。如果我的数据包含低于100的数据(即数据中的最高值= 75),则它应该在y轴上显示80作为最高数字。它在y轴上不应显示500。
<Bar
data={this.state.data}
width={400}
height='150'
options={{
tooltips: {
mode: 'point',intersect: false,},responsive: true,scales: {
xAxes: [{
stacked: true,}],yAxes: [{
stacked: false,ticks: {
beginAtZero: true,min: 0,max: 500
}
},{
id: "bar-stacked",stacked: true,display: false,max: 500
},type: 'linear'
}]
}
}}
/>
是否可以使其动态化?如果是,有人可以帮助我进行此查询吗?
解决方法
要动态计算报价,您需要做些事情。
- 一种用于预先计算并在数据中找到最大值的实用程序。
- 用于计算最大轴刻度的实用程序。
要在(可能是对象)数据数组中查找最大值,可以执行以下操作。
const findMaxVal = (arr,field) => Math.max(...arr.map((el) => el[field]));
const data = [
{
id: 0,customField: 23
},{
id: 1,customField: 31
},{
id: 2,customField: 29
},{
id: 3,customField: 7
},{
id: 4,customField: 13
}
];
const findMaxVal = (arr,field) => Math.max(...arr.map((el) => el[field]));
console.log(findMaxVal(data,"customField")); // 31
[编辑]
您在评论中提到您的数据具有这种形状
[
{xaxis: "bar-stacked",data:[0,12,19,50,2,30,14]},{yaxis: "bar-stacked",data:[2,4,15,29,10,3,1]},]
要在数据中找到最大值,您可以将data
散布到Math.max
中。
const findMaxVal = data => Math.max(...data);
const data = [
{xaxis: "bar-stacked",];
const findMaxVal = data => Math.max(...data);
console.log(findMaxVal(data[0].data)); // 50
console.log(findMaxVal(data[1].data)); // 29
[/ edit]
要计算最大报价,您可以计算从数据计算出的最大值之后的下一个“块状”报价,其内容类似于:
const computeTicks = (val,chunk = 10) => Math.floor(val / chunk) * chunk + chunk;
或
const computeTicks = (val,chunk = 10) => Math.ceil(val / chunk) * chunk;
如果值除以块数量,即数据最大值80应该具有80或90的最大刻度,则两者之间的差是要四舍五入的结果。第一个将产生90,而第二个将产生90 80。
const computeTicks = (val,chunk = 10) => Math.floor(val / chunk) * chunk + chunk;
console.log(computeTicks(13)); // 20
console.log(computeTicks(19,10)); // 20
console.log(computeTicks(20,10)); // 30
console.log(computeTicks(13,5)); // 15
console.log(computeTicks(13,6)); // 18
console.log(computeTicks(18,6)); // 24
console.log(computeTicks(19,6)); // 24
将这两个部分放在一起以计算要在图表中显示的刻度。
const dataMax = findMaxVal(data,'fieldIwantMaxOf'); // <-- compute max val before JSX return
...
<Bar
...
options={{
...,scales: {
...,yAxes: [
{
...,ticks: {
...,max: computeTicks(dataMax,10) || 500,// <-- compute max or use default 500
}
},...,]
}
}}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。