web-dev-qa-db-ja.com

Chart.jsでX軸間隔を変更する方法

Chart.jsに折れ線グラフがあり、x軸とy軸の間隔を編集しようとしています。

Y軸の間隔は期待どおりに機能していますが、x軸の間隔は機能していません。

次のコードを試しました

let myChart = new Chart(inputChart, {
    type: 'line',
    data: {
          labels: [1,2,....,360] // list of values from python script
          data: [360 random numbers here] 
    }
    options: {
        scales: {
            yAxes: [{
                id:'main-axis',
                ticks: {
                     stepSize: 40 // this worked as expected
                        }
                   }],
            xAxes: [{
                id: 'main-x-axis',
                ticks: {
                    stepSize: 30 // this did not work as expected
                }
            }]
        }
    }
})

360のデータポイントでは、基本的に12の間隔（30の増分）を表示したいのですが、代わりに4の増分で90の間隔を表示しています。 stepSizeに間違ったプロパティを使用しているだけですか？もしそうなら、正しいプロパティは何ですか？

chart.jschartjs-2.6.0
3
kashmoney

XAxesのmaxTicksLimitオプションを使用して実行できます。この作業フィドルを参照してください-> http://jsfiddle.net/Lzo5g01n/3/

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]
6
Kunal Khivensara