[Javascript]Chartist.jsでクロスブラウザ対応のグラフを書こうよ

今回はJavascriptのライブラリ「Chartist.js」をやっていきます。

折れ線グラフ、棒グラフ、円グラフができます。
CDNにJSがアップされている親切設計です。

では早速グラフを表示するソースコードはこちら

<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<div class="ct-chart ct-golden-section" id="chart1"></div>
<div class="ct-chart ct-golden-section" id="chart2"></div>
<div class="ct-chart ct-golden-section" id="chart3"></div>
<script>
//折れ線グラフ
new Chartist.Line('#chart1', {
labels: [1, 2, 3, 4],
series: [[100, 120, 180, 200]]
});
//棒グラフ
new Chartist.Bar('#chart2', {
labels: [1, 2, 3, 4],
series: [[5, 2, 8, 3]]
});
//円グラフ
var data = {
series: [5, 3, 4]
};
var sum = function(a, b) { return a + b };
new Chartist.Pie('#chart3', data, {
labelInterpolationFnc: function(value) {
return Math.round(value / data.series.reduce(sum) * 100) + '%';
}
});
</script>

//折れ線グラフ

new Chartist.Line('#chart1', {

labels: [1, 2, 3, 4],

series: [[100, 120, 180, 200]]

});

//棒グラフ

new Chartist.Bar('#chart2', {

labels: [1, 2, 3, 4],

series: [[5, 2, 8, 3]]

});

//円グラフ

var data = {

series: [5, 3, 4]

};

var sum = function(a, b) { return a + b };

new Chartist.Pie('#chart3', data, {

labelInterpolationFnc: function(value) {

return Math.round(value / data.series.reduce(sum) * 100) + '%';

}

});

</script>

折れ線グラフ

棒グラフ

円グラフ

あとがき

アニメーション以外ではクロスブラウザ対応なので
とても使い勝手が良いと思います。

あとまだまだこのライブラリの良さがあるのでいつか続きを書くかもしれないです。

参考
Chartist.js

あとがき

関連