Chart.js - 设置最大Y轴值并保持步骤正确 [英] Chart.js - Setting max Y axis value and keeping steps correct

问题描述

我正在使用Chart.js 2.6。我有一个图表，我已添加自定义分页以逐步浏览数据集，因为它非常大。我的分页和一切都很好，我只是抓取我的集合中的下一个数据块并使用新的数据对象更新chart.config.data，然后在图表上调用.update（）。但是，为了使图表有意义，我需要在用户分页时保持左（Y轴）比例相同。通常Chart.js会根据图表中的数据重建它，但我希望它始终反映相同的值。

I'm using Chart.js 2.6. I have a chart to which I've added custom pagination to step through the dataset, as it is quite large. My pagination and everything works great, I simply grab the next chunk of data in my set and update the chart.config.data with the new data object, and then call .update() on the chart. However, in order to make the chart make sense, I needed to keep the left (Y-axis) scale the same when the user is paginating through. Normally Chart.js would rebuild it based on the data in the chart, but I want it to always reflect the same values.

我设置了 max 图表的yAxes对象上的值到我的数据集中的最大值。我还将beginAtZero选项设置为true，将maxTicksLimit设置为10.然而，即使我的Yaxis保持不变，它也不总是那么好（见下面的截图）。在此示例中，我的最大值在图表中设置为21,000。有没有人有任何建议，我怎么能提供更好的最大值（根据价值四舍五入到下一个5,000,500,100等）或某种方式让它创建Y轴而不用碾压顶部数字的方式它现在呢？

I've set the max value on the yAxes object of the chart to the maximum value in my data set. I've also set the beginAtZero option to true, and the maxTicksLimit to 10. However, even though my Yaxis does stay the same, it doesn't always look that great (see below screenshot). In this example, my max is set to 21,000 in the chart. Does anyone have any suggestions as to how I can either provide a better max (rounding up to next 5,000, 500, 100, etc based on the value) or some way to get it to create the Y axis without crunching the top number the way it does now?

这是功能我目前用于确定最大数据值以设置为图表中Yaxes对象的最大值。 plugin.settings.chartData变量表示图表中使用的数据值的数组。我试图让它根据maxValue的内容正确增加到下一个1000,500等，但正如你可以看到我的数学不正确。在屏幕截图示例中，maxValue返回为20,750，我的函数将其舍入为21,000。在这个例子中，它应该将它四舍五入到下一个增量，即25,000。

Here is the function I currently use to determining the max data value to set as the max value in the Yaxes object in the chart. the plugin.settings.chartData variable represents an array of the data values used in the chart. I am trying to get it to increment correctly to the next 1000, 500, etc based on what the maxValue is, but as you can see my math is not correct. In the screenshot example, the maxValue is coming back as 20,750 and my function is rounding it up to 21,000. In this example it SHOULD round it up to the next increment which would be 25,000.

var determineMaxDataValue = function() {
    var maxValue = Math.max.apply(Math, plugin.settings.chartData);
    var step = maxValue > 1000 ? 1000 : 500;
    plugin.settings.maxDataValue = (Math.ceil(maxValue / step) * step);             
};

推荐答案

想出来。我没有像往常一样在Y轴上提供最大值，而是实现了afterBuildTicks回调并更新了滴答以获得正确的增量。

Figured it out. Instead of supplying the max value on the Y Axis as I have been, I instead implemented the afterBuildTicks callback and updated the ticks to have the correct increments.

yAxes: [{
  afterBuildTicks: function(scale) {
  scale.ticks = updateChartTicks(scale);
    return;
  },
  beforeUpdate: function(oScale) {
    return;
  },
  ticks: {  
    beginAtZero:true,
    // max:plugin.settings.maxDataValue,
    maxTicksLimit: 10
  }
}] 

我的updateChartTicks函数循环现有的滴答，并确定滴答之间的正确增量。然后我使用该值来添加我的最终tick，它总是大于数据集中的最大数据。

my updateChartTicks function loops over the existing ticks and determines the correct increment amount between the ticks. Then I use that value to add my final "tick" which will always be greater than the largest data in the dataset.

var updateChartTicks = function(scale) {
  var incrementAmount = 0;
  var previousAmount = 0;
  var newTicks = [];
  newTicks = scale.ticks;
  for (x=0;x<newTicks.length;x++) {
    incrementAmount = (previousAmount - newTicks[x]);
    previousAmount = newTicks[x];   
  }
  if (newTicks.length > 2) {
    if (newTicks[0] - newTicks[1] != incrementAmount) {
      newTicks[0] = newTicks[1] + incrementAmount;                  
    }
  }         
  return newTicks;          
};

这篇关于Chart.js - 设置最大Y轴值并保持步骤正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！