Chart.js - 设置最大 Y 轴值并保持步骤正确

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

问题描述

我正在使用 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.

我已将图表的 yAxes 对象上的 max 值设置为我的数据集中的最大值.我还将 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 轴值并保持步骤正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！