Chart.js手引書


目次


Chart.jsを使ってグラフを表示しよう


Chart.jsを使ってグラフを表示しよう


Chart.jsのインストール

作業用のフォルダを一つ作成してください

Chart.jsダウンロードサイトに飛びます

少し下に行くと下記画面が出てくるので「SourceCode (zip)」をクリックしてください

エクスプローラーのダウンロードにある「Chart.js-2.8.0.zip」を右クリック「すべて展開」をクリックします

作業用のフォルダに「js」フォルダを作成してください

展開したフォルダにある「dist」フォルダの中のChart.jsを先ほどのjsフォルダに入れます

入れた後のjsフォルダ

ページトップ

htmlの準備

作業フォルダに「htmlファイル」を用意して画像に書いてあることと同じコードを書いてください

ページトップ

Chart.jsの基本

(1)htmlからダウンロードしてきたファイルを読み込みます

<script src="js/Chart.js"></script>の記述を<head></head>内に記載してください

(2)<canvas id="myChart"></canvas>を<body></body>内に記載してください

※画像はwidth,heightの記述がありますが無くていいです

(3)</body>閉じタグの直前などで、スクリプトを実行してグラフを描きます。以下のコードが基本形になります（これをコピペしても動きません）

<script>
var ctx = document.getElementById("myChart");
var myChart= new Chart(ctx, {
  // グラフの種類
  type: type,
  // データの設定
  data: data,
  // グラフのオプション
  options: options
}); </script>

コード全体だと以下のようになります(ここからtype, data, optionに設定を行ってグラフの表示を行います)

ページトップ

グラフを表示

棒グラフ

Chart.jsの基本の(3)で書いたところに下記を上書いて書いてください

var ctx = document.getElementById("myChart");
var myBarChart = new Chart(ctx, {
  //グラフの種類(棒グラフはbar)
  type: 'bar',
  //データの設定
  data: {
    //データ項目のラベル
    labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
    //データセット
    datasets: [{
      //凡例
      label: "契約数",
      //背景色
      backgroundColor: "rgba(75,192,192,0.4)",
      //枠線の色
      borderColor: "rgba(75,192,192,1)",
      //グラフのデータ
      data: [12, 19, 3, 5, 2, 3]
    }]
  },
  //オプションの設定
  options: {
    //軸の設定
    scales: {
      //縦軸の設定
      yAxes: [{
        //目盛りの設定
        ticks: {
          //開始値を0にする
          min:0,
        }
      }]
    }
  }
});

表示結果

折れ線グラフ

Chart.jsの基本の(3)で書いたところに下記を上書いて書いてください

var ctx = document.getElementById("myChart");
var myBarChart = new Chart(ctx, {
  //グラフの種類(折れ線グラフはline)
  type: 'line',
  //データの設定
  data: {
    //データ項目のラベル
    labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
    //データセット
    datasets: [{
      //凡例
      label: "契約数",
      //面の表示
      fill: false,
      //線のカーブ
      lineTension: 0,
      //背景色
      backgroundColor: "rgba(75,192,192,0.4)",
      //枠線の色
      borderColor: "rgba(75,192,192,1)",
      //グラフのデータ
      data: [12, 19, 3, 5, 2, 3]
    }]
  },
  //オプションの設定
  options: {
    //軸の設定
    scales: {
      //縦軸の設定
      yAxes: [{
        //目盛りの設定
        ticks: {
          //開始値を0にする
          min:0,
        }
      }]
    }
  }
});

表示結果

棒グラフと折れ線グラフの複合グラフ

Chart.jsの基本の(3)で書いたところに下記を上書いて書いてください

var ctx = document.getElementById("myChart");
var myBarChart = new Chart(ctx, {
  //グラフの種類
  type: 'bar',
  //データの設定
  data: {
    //データ項目のラベル
    labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
    //データセット
    datasets: [{
      //グラフの種類
      type: 'line',
      //面の表示
      fill: false,
      //線のカーブ
      lineTension: 0,
      //凡例
      label: "契約数",
      //背景色
      backgroundColor: "rgba(251,168,72,0.4)",
      //枠線の色
      borderColor: "rgba(251,168,72,1)",
      //グラフのデータ
      data: [12, 19, 3, 5, 2, 3]
    },{
      //凡例
      label: "点数",
      //背景色
      backgroundColor: "rgba(75,192,192,0.4)",
      //枠線の色
      borderColor: "rgba(75,192,192,1)",
      //グラフのデータ
      data: [32, 19, 53, 45, 82, 73]
    }]
  },
    //オプションの設定
    options: {
    //軸の設定
    scales: {
      //縦軸の設定
      yAxes: [{
        //目盛りの設定
        ticks: {
          //開始値を0にする
          min:0,
          //最大値を100にする
          max:100,
        }
      }]
    }
  }
});

表示結果

ページトップ

一番小さい値だけグラフの色を変更するメソッド

以下の画像のコード(画像の11行目～54行目)をvar ctx = document.getElementById("myChart");の上に書いてください

コードを下記に変更してください

var ctx = document.getElementById("myChart");
var myBarChart = new Chart(ctx, {
  //グラフの種類
  type: 'bar',
  //データの設定
  data: {
    //データ項目のラベル
    labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
    //データセット
    datasets: [{
      //グラフの種類
      type: 'line',
      //面の表示
      fill: false,
      //線のカーブ
      lineTension: 0,
      //凡例
      label: "契約数",
      //背景色
      backgroundColor: "rgba(251,168,72,0.4)",
      //枠線の色
      borderColor: "rgba(251,168,72,1)",
      //グラフのデータ
      data: [12, 19, 3, 5, 2, 3]
    },{
      //凡例
      label: "点数",
      //背景色
      backgroundColor: pointBgcolors,
      //枠線の色
      borderColor: pointBgcolors,
      //グラフのデータ
      data: points
    }]
  },
    //オプションの設定
    options: {
    //軸の設定
    scales: {
      //縦軸の設定
      yAxes: [{
        //目盛りの設定
        ticks: {
          //開始値を0にする
          min:0,
          //最大値を100にする
          max:100,
        }
      }]
    }
  }
});

表示結果　最小値のデータのグラフだけ違う色で表示されています

ページトップ