热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《Chart.js-设置最大Y轴值并保持正确的步骤》经验,为你挑选了1个好方法。

我正在使用Chart.js 2.6。我有一个图表,在其中添加了自定义分页以逐步浏览数据集,因为它很大。我的分页和一切工作正常,我只需要获取集合中的下一个数据块,并使用新的数据对象更新chart.config.data,然后在图表上调用.update()。但是,为了使图表有意义,我需要在用户进行分页时保持左(Y轴)比例不变。通常,Chart.js会根据图表中的数据重建它,但我希望它始终反映相同的值。

我已将max图表的yAxes对象上的值设置为我的数据集中的最大值。我还已将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);             
};

小智.. 6

我也有同样的问题。您无需编写任何特殊函数即可确定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



1> 小智..:

我也有同样的问题。您无需编写任何特殊函数即可确定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


推荐阅读
author-avatar
wangimcf
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有