无法基于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'
}]
        }
    }}
/>

是否可以使其动态化？如果是，有人可以帮助我进行此查询吗？

解决方法

要动态计算报价，您需要做些事情。

1. 一种用于预先计算并在数据中找到最大值的实用程序。
2. 用于计算最大轴刻度的实用程序。

要在（可能是对象）数据数组中查找最大值，可以执行以下操作。

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
          }
        },...,]
    }
  }}
/>