在y轴vue-chartjs上设置修正值

时间:2017-07-13 04:13:16

标签: chart.js vue-chartjs

我使用vue-chartjs作为chartjs的包装。我有一个简单的折线图与随机数据,但坚持如何设置修正值,以显示在图表的y轴。目前我有0-100的随机数据。现在,我想要实现的只是在y轴上显示0-100,无论随机值是从putData: function () { this.datacollection = { labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'], datasets: [{ lineTension: 0, borderWidth: 1, borderColor: '#F2A727', pointBackgroundColor:[ '#fff', '#fff', '#fff', '#fff', '#fff', '#F2A727'], backgroundColor: 'transparent', data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()] }] } }, getRandomInt: function () { return Math.floor(Math.random() * (95)) + 5 }开始。

示例脚本



{{1}}




非常感谢任何帮助。

2 个答案:

答案 0 :(得分:3)

要实现这一目标,您需要在图表选项中为y轴刻度设置 stepSize: 50 maxTicksLimit: 3

scales: {
   yAxes: [{
      ticks: {
         stepSize: 50,
         maxTicksLimit: 3
      }
   }]
}

答案 1 :(得分:1)

以上答案是正确的。 对于那些感兴趣的人,我发布了 Chart.js 最新版本的代码

更新到 Chart.js v3.2.0(不向后兼容 v2.xx

如果您的随机数据值都在接近 50 的中间范围内,为了避免自动缩放,请执行以下操作:

添加 min: 0max: 100,因此您强制图表准确显示包括 0 在内的 3 个刻度,因此 maxTicksLimit: 3:

100

50

0

<script>
   // ...

options: {
   scales: {
      y: {
         min: 0,
         max: 150,
         ticks: {
            stepSize: 50,
            maxTicksLimit: 3
         }
      }
   }
};

   // ...
</script>

来源:https://www.chartjs.org/docs/latest/axes/#tick-configuration

(请注意,在新版本 v3.xx 中,min: 0max: 100 现在位于外部刻度对象,而在 < strong>v2.xx 它曾经在 ticks 对象内)。