これはブログです。

3DCGとかWebとかカメラとか

2019/06/09

Chart.js使い方メモ

技術書典6で記録した頒布情報をグラフ化するため、Chart.jsを使ってみました。

 

元データはcsvファイルなので前回の記事を参考にファイルを読み込みます。

 

 

requestがonloadされたら、まずは”\n”(改行コード)でsplitしさらに”,”で切ります。これでアイテム毎に分割されました。

 

Chart.jsは公式サイトからダウンロードするか、CDNを利用します。一応ElectronアプリでもCDNが利用できました(そりゃそうか…)

 

 

使い方については下記のサイトを参考にしました。

 

即売会での頒布数をグラフ化が目的ですが、頒布する本の数は即売会によって変わります。なので、プログラムとしてデータ数(本の数)が変わってもグラフが表示されるようにしなくてはなりません。ここで、問題(というほどではありませんが)になるのが、

  • datasetsのdata
    • label(本の名前)
    • backgroundColor(棒グラフのバーの色)
    • data(頒布数)

です。結果的にはpushすれば解決しました。

 

 

books[]には本の名前が、data[]には各時間における頒布数が保存されています。色は本の数で明度を階層的になるようにしました。

結果は以下のようになりました。本の順番はデータから「見つけた順」なので降順・昇順にはなっていません。

 

カテゴリ: プログラミング / タグ: ,

まだコメントはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。