ChartJSで作成したグラフのX軸の項目数を減らしたい
ChartJSで作成したグラフのX軸の項目数を減らしたい
もうね、cahrt.js楽しすぎです。
今まで「グラフ化って難しそうだなぁ」と少し遠ざけていたのですが、データの理解が早いのは間違いないですね。
グラフってスゲーと思います。
そんな中、各モールでの商品ランキング(自店舗商品のランキングではありません)をグラフ化したら判り易くなるなと思い実装する事にしました。
データ元はランキングの変化
システム内に取込んでいるランキング情報は、前の値から変化があった時に新規追加するように仕込んでいます。
チェッカーはCRONで毎日起動。変化が無い時やランク外となった時は何もしません。
つまりは登録される日付が商品によってバラバラになるので、2つの課題に遭遇しました。
- 月間売上集計とかの様にX軸を固定できない。
- 集計日の数も異なる為、横軸の項目数が異なり、○個のデータ取得と指示すると期間にばらつきが出る。
期間はできれば3年程度見たいです。季節商材とかもありますから。
と言う事で、横軸の項目名を減らす方法を探したら。
ありました!しかも超簡単!すげーなChartjs。
項目数を減らすのはオプションの設定だけでOK
1 2 3 4 5 6 7 8 9 10 11 |
var myChart = new Chart(ctx, { type: 'line', data: data, options: { scales: { xAxes: [{ ticks: { autoSkip: true, maxTicksLimit: 20 //値の最大表示数 } }] |
これだけです。
密になった時に軸名を斜めにするやつ。あれを止めるのもオプション設定の様です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var myChart = new Chart(ctx, { type: 'line', data: data, options: { scales: { xAxes: [{ ticks: { maxRotation: 0, minRotation: 0 } }] } } }); |
まとめ
いやぁ、超楽。
あっという間に思い描いた形が出来てしまいました。
-
前の記事
楽天さんが「39ショップの売上が楽天市場全体の成長をけん引している」と言うので調べてみた 2020.05.28
-
次の記事
楽天市場の商品レビューを取得して好きなように扱う方法を考えてみた 2 2020.06.01