图表 js - Vue-ChartJs - 选项和刻度不适用于 xAxis

Question

我正在努力使用 ChartJs 和 VueChartJs 来自定义我的图表选项。

我希望我的 xAxis 样式是 'normal' 并且我希望我的刻度步长是 5 所以这是我不工作的代码：

        scales:{
          xAxes: [{
            ticks: {
              stepSize: 5,
              fontStyle: 'normal'
            },
            scaleLabel: {
              display: true,
              labelString: 'min'
            } }],
          yAxes: [{
            display: true,
            ticks: {
              beginAtZero: true,
              maxTicksLimit: 5,
              stepSize: 5000,
              mirror: true }
            }]
        },

看来 y 轴运行良好，而 x 轴不想遵循所有规则。

你们知道我做错了什么吗？

在此先感谢您的帮助！

Answer 1

stepSize 适用于线性轴，如果你想使用你应该将 xAxe 声明为线性，那么你还应该为你的线性刻度设置一个最小值和一个最大值以使其正常工作。

应该这样做：

        xAxes: [{
          type: 'linear',
          ticks: {
              max: 40,
              min: 0,
              stepSize: 5
          },
          scaleLabel: {
            display: true,
            labelString: 'min'
          }
        }],

图表 js - Vue-ChartJs - 选项和刻度不适用于 xAxis

Chart js - Vue-ChartJs - Options and ticks not working for xAxis

vue.js

vue-chartjs