chart.js でグラフを表示する

chart.js を使って色々なグラグを表示してみます。

Contents

chart.js

chart.js はシンプルで柔軟なグラフを綺麗に描画できる、javascript のチャートライブラリです。

インストール

npm install chart.js --save

1	npm install chart.js --save

種類

主に6 種類のチャートがあります。組み合わせて使用することもできます。

line
bar
radar
polar area
doughnut and pie
bubble

設定

描画させる為の canvas と表示する為の javascript を設定します。

bar タイプを例としては下記のような設定となります。backgraoundColor は RGB、16進数または HLS にて指定できます。また、チャートを指定のパターンにすることもできます。

<canvas id="myChart" width="200" height="100"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["赤", "青", "黄"],
        datasets: [{
            label: '色',
            data: [12, 19, 3],
            backgroundColor: [
                '#ff0000',
                '#0000ff',
                '#ffff00'
            ],
            borderColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)'
            ],
            borderWidth: 1
        }]
    }
});
</script>

var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {

type: 'bar',

data: {

labels: ["赤", "青", "黄"],

datasets: [{

label: '色',

data: [12, 19, 3],

backgroundColor: [

'#ff0000',

'#0000ff',

'#ffff00'

borderColor: [

'rgba(255, 99, 132, 0.2)',

'rgba(54, 162, 235, 0.2)',

'rgba(255, 206, 86, 0.2)'

borderWidth: 1

}]

}

});

</script>

実行

まとめ

手軽に柔軟なグラフを描画することができました。複合して使えたり、描画したグラフを画像にすることもできますので、グラフ作成におすすめです。

参考

公式：Chart.js

公式ドキュメント：Chart.js documentation

chart.js

インストール

種類

設定

実行

まとめ

参考

返信を残す コメントをキャンセル

返信を残すコメントをキャンセル