如何使用Chart.js使刻度均匀分布

Question

我有一个带有一列的horizo​​ntalBar图表。我希望刻度从0到70，均匀间隔和10点增量。我已经尝试了几种选择，但似乎无法使其成功。我能做的最好是：

这是我用来生成此图表的代码：

<div style="width: 330px; height: 100px;">
                    <canvas id="chartBarChart1" style="margin-right: auto; margin-left: auto; display: block;" height="100"></canvas>
                </div>
                <script>
                    var ctx = document.getElementById('chartBarChart1').getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'horizontalBar',
                        data: {
                            labels: ['CI'],
                            datasets: [
                                {
                                    label: 'CI',
                                    data: [45],
                                    backgroundColor: 'Red'
                                }
                            ]
                        },
                        options: {
                            scales: {
                                xAxes: [{
                                    ticks: {
                                        max: 70,
                                        beginAtZero: true
                                    }
                                }]
                            }, legend: { display: false },

                            responsive: false,
                            maintainAspectRatio: false
                        });
</script>

有办法吗？

Answer 1

使用“stepSize”配置这样的刻度：

var ctx = document.getElementById('chartBarChart1').getContext('2d');

var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ['CI'],
    datasets: [{
      label: 'CI',
      data: [45],
      backgroundColor: 'Red'
    }]
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          max: 70,
          beginAtZero: true,
          stepSize: 10
        }
      }]
    },
  },
});

https://jsfiddle.net/hdahle/zxdjqo82/