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

Question

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

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

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

Answer 1

我也有同样的问题。您无需编写任何特殊函数来确定Yaxes中的最大值。使用建议的Max＆＃39;设置。而不是设置＆＃39; max＆＃39;作为图表中的最大值，将suggestMax设置为图表中的最大值。如果你已经设置了“步骤大小”，那就永远不会有效。

options: {
 scales: {
  yAxes: [{
    ticks: {
     suggestedMax: maxvalue+20
     }
   }]
  }
}

添加了

20，因此最大值的工具提示将清晰可见。

有关详细信息，请参阅http://www.chartjs.org/docs/latest/axes/cartesian/linear.html#axis-range-settings

Answer 2

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

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

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

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;          
};