无法基于React.js中堆积条形图的数据动态更改y轴值 [英] Unable to change y-axis value dynamically based on data for Stacked bar chart in reactjs

问题描述

我的目标，用于在图表中动态显示y轴值.如果我的数据包含低于100的数据(即数据中的最高值= 75)，那么它应该在y轴上显示80作为最高数字.它在y轴上不应显示500.

My Objective to show the y-axis value dynamically in the chart. If my data contains below 100 i.e(highest value in data = 75) then it should show 80 as highest number in y-axis. it should not show 500 in the y-axis.

<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,
  ticks: {
    beginAtZero: true,
    min: 0,
    max: 500
  },
  type: 'linear'
}]
        }
    }}
/>

是否可以使其动态化?如果是，有人可以在此查询中为我提供帮助吗?

Is it possible to make it dynamic? If yes, Can anyone help me in this query?

推荐答案

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

To dynamically compute the ticks you need a couple things.

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

要在(可能是对象)数据数组中查找最大值，可以执行以下操作.

To find the maximum value in the array of (presumably objects) data you can do something similar to the following.

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

您在评论中提到您的数据具有这种形状

You mention in comments your data has this shape

[
  {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 中即可.

To find the maximum value in the data you can simply spread data into Math.max.

const findMaxVal = data => Math.max(...data);

const data = [
      {xaxis: "bar-stacked", data:[0,12,19,50,2,30,14]},
      {yaxis: "bar-stacked", data:[2,4,15,29,10,3,1]},
    ];

const findMaxVal = data => Math.max(...data);

console.log(findMaxVal(data[0].data)); // 50
console.log(findMaxVal(data[1].data)); // 29

[/edit]

要计算最大滴答声，您可以计算下一个块状"消息.在从数据计算出的最大值之后滴答作响，类似于:

To compute the max tick you can compute the next "chunked" tick after the maximum computed from data with something similar to:

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，而第二个将产生80.

The difference between the two is what to "round" to if the value is even divided by the chunk amount, i.e. if data max 80 should have max tick of 80 or 90. This first would yield 90 while the second would yield 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

将这两个部分放在一起以计算要在图表中显示的刻度.

Put these two together to compute the ticks to display in the graph.

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

这篇关于无法基于React.js中堆积条形图的数据动态更改y轴值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！