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

Question

我用vue-chartjs as a wrapper for chartjs。我有一个带有随机数据的简单折线图，但坚持如何设置固定值以显示在图表的 y 轴上。目前我有 0-100 的随机数据。现在，我想要实现的只是在 y 轴上显示 0, 50, 100，无论随机值是从 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

为此，您需要为 y 轴刻度设置 stepSize: 50 和 maxTicksLimit: 3，在您的图表选项中：

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

Answer 2

以上回答正确。对于那些感兴趣的人，我 post 为最新版本的 Chart.js

编写了代码

已更新至 Chart.js v3.2.0（不向后兼容 v2.xx）

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

添加 min: 0 和 max: 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: 0 和 max: 100 现在位于外部 ticks-object，而在 v2.xx 中它曾经在 ticks-object 中）。

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

Set fix values on y-axis vue-chartjs

chart.js

vue-chartjs