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

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

我已经将图表的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);    
};

来源

2017-07-03 Phil

想通了。我没有像以前那样在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;    
     };

来源

2017-07-03 16:09:50 Phil

我也有同样的问题。您无需编写任何特殊函数来确定Yaxes中的最大值。使用'suggestedMax'设置。相反，为了在图表中将“max”设置为最大值，请将suggestMax设置为图形中的最大值。如果你已经设置了“stepsize”，这将无法工作。

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

20被添加，所以最大值的工具提示将清晰可见。请参考http://www.chartjs.org/docs/latest/axes/cartesian/linear.html#axis-range-settings

来源

2017-10-30 05:24:10 Vidya

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

回答

相关问题