これはブログです

3DCGとかプログラミングとか

Chart.js使い方メモ

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

元データはcsvファイルなので<a href=”https://tenteroring.org/sierra/?p=2392″>前回の記事</a>を参考にファイルを読み込みます。

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<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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください