chart.js之 - 设置最大Y轴值，并保持正确的步骤

Question

我使用chart.js之2.6。我有我已经添加了自定义分页来逐步数据集的图表，因为它是相当大的。我分页和一切都很正常，我只是抓住数据的下一块在我的设置和更新与新的数据对象的chart.config.data，然后调用.update（）在图表上。然而，为了使图有意义，我需要保持左侧（Y轴）标度相同，当用户通过分页。通常chart.js之将根据图表中的数据重建它，但我想它总是反映相同的值。

我图的yAxes对象的max值设置为我的数据集的最大值。我还设置了beginAtZero选项设置为true，并maxTicksLimit〜10然而，即使我的Y轴也保持不变，它并不总是看这个伟大的（见下图）。在这个例子中，我最大的图表中设置为21,000点。有没有人有任何建议，我怎么可以提供更好的最大值（四舍五入到下一个5000，500，100，等基于价值）或某种方式得到它不啃上面的数字的方式创建Y轴现在呢？

这是我目前使用于确定最大数据值设定为图中的Yaxes对象最大值的函数。所述plugin.settings.chartData变量表示在图表中所使用的数据值的阵列。我试图让它正确地递增到下一个1000，500等基础上，包括maxValue是什么，但你可以看到我的数学是不正确的。在截图例子中，包括maxValue是回来为20,750和我的功能四舍五入它21000。在这个例子中，它应该四舍五入它的下一个增量这将是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最大值。使用“suggestedMax”设置。相反，设置“最大”作为您的图形最大值设置为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功能遍历现有的蜱，并确定蜱之间的正确递增量。然后我使用该值加我最后的“滴答”，这将永远是比在数据集中的最大的数据更大。

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