在 y 轴 vue-chartjs 上设置固定值

Question

我使用VUE-chartjs作为一个包装chartjs。我有一个带有随机数据的简单折线图，但坚持如何设置要在图表的 y 轴上显示的固定值。目前我有 0-100 的随机数据。现在，我想要实现的只是显示0, 50, 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
}

任何帮助将非常感激。

Answer 1

为了实现这一目标，就需要一套stepSize: 50和maxTicksLimit: 3为y轴的刻度，在您的图表选项：

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