Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/376.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Chart.js-如何计算条形图上的Y轴?_Javascript_Jquery_Chart.js_Chart.js2 - Fatal编程技术网

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

Javascript Chart.js-如何计算条形图上的Y轴?,javascript,jquery,chart.js,chart.js2,Javascript,Jquery,Chart.js,Chart.js2,谁能告诉我Chart.js 2.6+用于计算条形图中Y轴的数学逻辑?我已经创建了一个分页功能,允许我在一个有大量列的条形图中翻页。它工作得很好,只是我需要Y轴在图表数据集更改时保持不变 为此,我获取图表的数据并创建其子集,例如前20条记录,并将其作为数据对象提供给图表。为了使Y轴固定,我取完整数据集中的最大值,并将其作为图表中yAxes对象的ticks中的max值 yAxes: [{ ticks: { max:value_i_determine_here

谁能告诉我Chart.js 2.6+用于计算条形图中Y轴的数学逻辑?我已经创建了一个分页功能,允许我在一个有大量列的条形图中翻页。它工作得很好,只是我需要Y轴在图表数据集更改时保持不变

为此,我获取图表的数据并创建其子集,例如前20条记录,并将其作为数据对象提供给图表。为了使Y轴固定,我取完整数据集中的最大值,并将其作为图表中
yAxes
对象的
ticks
中的
max

yAxes: [{
     ticks: {
          max:value_i_determine_here
     }
}]
这确实有效,但并不完美,因为Chart.js有时会创建过于紧密的步骤,从而生成一个类似下面的图表

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


所以我的问题是,Chart.js如何计算Y轴中要使用的值?如果我知道这个逻辑,那么我使用这个逻辑根据我的完整数据集获取最大值,并将该值作为最大值提供。

我最后要做的是编写一个函数,该函数将获取完整数据集中的最大值,并将其除以我提供给Y轴的值
maxTicksLimit
属性。然后,我通过复杂的if/else-if条件运行这个值,该条件如下所示

然后,我使用返回的
步长
作为Y轴步长属性提供给图表。看起来效果不错。如果有人有更好的解决方案,请让我知道,因为这是基于我的硬编码计算,我更喜欢更动态的方法

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

我发现自己的处境与你相似。我使用步长和最大属性创建了一个更通用的方法

// StepSize Function
stepSize = (maxValue) => {
  return parseInt((this.maxValue / (numberOfRowsYouWant - 1)).toFixed(0));
} 

// In Scale Options
scales: {
  yAxes: [{
    display: true,
    ticks: {
       max: this.maxValue + this.stepSize(),
       stepSize: this.stepSize(),
       display: true,
       beginAtZero: true
    }
  }]
}

看起来它需要200K的步长,但它仍然表示最大yAxis值。我想如果最大值是180001,结果会更糟。