n-HIROKIの日常

n-HIROKIの取り組みを記録したものです。

Chart.jsの使い方を簡単に!!

こんにちは、n-hirokiです!

今回は、Chart.jsの使い方です!

Chart.jsの準備

・インストール
GitHubからダウンロードする

Chart.jsはnpmまたはbower経由でインストールできます。


npm v2.7.2

npm install chart.js --save

Bower v2.7.2

bower install chart.js --save



CDN
CDNJS

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>


・ライセンス
Chart.jsはMITライセンスで利用できます。


Chart.jsを使い始めよう!

1、まずは、Canvas要素を用意します

  <canvas id="myChart"></canvas>

2、Chart.jsをインクルードします。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>

3、スクリプト作成

  var ctx = document.getElementById('myChart').getContext('2d');
  var chart = new Chart(ctx,{
    type:'line',
    data:{
      labels:["1月","2月","3月","4月","5月","6月","7月","8月"],
      datasets:[{
        label:"テスト",
        backgroundColor: 'rgb(255, 0, 0)',
        borderColor:'rgb(255,0,0)',
        data:[0, 10, 20, 30, 40, 50, 60, 70],
      }]
    },
    options:{
      //ここに設定オプションを記入します。
    }
  });