これはブログです。

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

この記事は更新されてから1年以上経過しています。

2019/06/09

Chart.js使い方メモ

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

 

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

 

let req = new XMLHttpRequest();
let element_file = document.getElementById("log_file");
let file_list = element_file.files;
let file = file_list[0];

req.open("get",file.path, true)
req.send(null);
req.onload = () =>{
    row = req.responseText.split('\n');
        for(i = 0; i <row.length-1; i++){
            item= row[i].split(',');

            //処理

        }
    }

}

 

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

 

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

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

 

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

 

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

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

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

 

let mydataset = [];

let num = Math.round(256 / data.length);
for (o=0; o&lt;data.length; o++){
    tmp ={
        label: books[o],
        backgroundColor: 'rgba(' + 0 + num*o + ',' + 0 + num*o + ',' + 0 + num*o + ',' +  '1.0)',
        data: data[o]
    }
    mydataset.push(tmp);
}
var mydata = {
    labels: label,
    datasets: mydataset
};

 

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

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

 

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

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

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

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