ChartJSで作成したグラフのX軸の項目数を減らしたい

ChartJSで作成したグラフのX軸の項目数を減らしたい

もうね、cahrt.js楽しすぎです。

今まで「グラフ化って難しそうだなぁ」と少し遠ざけていたのですが、データの理解が早いのは間違いないですね。

グラフってスゲーと思います。

そんな中、各モールでの商品ランキング（自店舗商品のランキングではありません）をグラフ化したら判り易くなるなと思い実装する事にしました。

データ元はランキングの変化

システム内に取込んでいるランキング情報は、前の値から変化があった時に新規追加するように仕込んでいます。

チェッカーはCRONで毎日起動。変化が無い時やランク外となった時は何もしません。

つまりは登録される日付が商品によってバラバラになるので、2つの課題に遭遇しました。

期間はできれば3年程度見たいです。季節商材とかもありますから。
と言う事で、横軸の項目名を減らす方法を探したら。
ありました！しかも超簡単！すげーなChartjs。

項目数を減らすのはオプションの設定だけでOK

var myChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
      scales: {
        xAxes: [{
          ticks: {
            autoSkip: true,
            maxTicksLimit: 20 //値の最大表示数
          }
        }]

これだけです。
密になった時に軸名を斜めにするやつ。あれを止めるのもオプション設定の様です。

var myChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
      scales: {
        xAxes: [{
          ticks: {
            maxRotation: 0,
            minRotation: 0
          }
        }]
      }
    }
  });

まとめ

いやぁ、超楽。

あっという間に思い描いた形が出来てしまいました。

＼ 最新情報をチェック ／