Chart.js-如何计算条形图上的Y轴?

菲尔

谁能告诉我Chart.js 2.6+在条形图中用于计算Y轴的数学逻辑?我创建了一个分页功能,以使我可以浏览具有大量列的条形图。效果很好,只不过我需要Y轴在图表数据集更改时保持恒定。

为此,我将获取图表的数据并创建其子集(例如前20条记录),并将其作为数据对象提供给图表。为了使Y轴固定,虽然,我走在完整数据集和供应最大值,该值作为max中值ticksyAxes图表中的对象,如下所示。

yAxes: [{
     ticks: {
          max:value_i_determine_here
     }
}]

这确实可行,但并非完美无缺,因为Chart.js有时会过于紧密地创建各个步骤,从而导致生成如下图所示的图表。

在此处输入图片说明

如您所见,最大值是1,900,000,因为我将其作为最大值提供。但是,我需要提供最大值,因为应该使用关于Chart.js确定的步骤确定的值。

所以我的问题是,Chart.js如何计算要在Y轴上使用的值?如果我知道此逻辑,则可以使用该逻辑基于我的完整数据集获取最大值,并提供该值作为最大值。

菲尔

我最终要做的是编写一个函数,该函数将整个数据集中的最大值除以我提供给Y轴maxTicksLimit属性的值。然后,通过类似于以下内容的if / else if复杂条件运行此值。

然后,我使用返回的值step并将其作为Y轴stepSize属性提供给图表。看起来工作不错。如果有人有更好的解决方案,请告诉我,因为该解决方案基于我的硬编码计算,因此我希望使用一种更动态的方法。

var determineStepSize = function(maxDatasetValue) {
     var maxStepTemp = Math.ceil(maxDatasetValue / maxYAxisTicks);
     // Determine what the step should be based on the maxStepTemp value
     if (maxStepTemp > 4000000) step = 8000000;
     else if (maxStepTemp > 2000000) step = 4000000;
     else if (maxStepTemp > 1000000) step = 2000000;
     else if (maxStepTemp > 500000) step = 1000000;
     else if (maxStepTemp > 250000) step = 500000;
     else if (maxStepTemp > 100000) step = 200000;          
     else if (maxStepTemp > 50000) step = 100000;
     else if (maxStepTemp > 25000) step = 50000;
     else if (maxStepTemp > 10000) step = 20000;
     else if (maxStepTemp > 5000) step = 10000;
     else if (maxStepTemp > 2500) step = 5000;
     else if (maxStepTemp > 1000) step = 2000;
     else if (maxStepTemp > 500) step = 1000;
     else step = 500;                   
     return step;
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章