できる!レスポンシブな javascript Chart.jp で基本の棒グラフ、線グラフ、円グラフを作る。
データラベルも表示できる。円グラフに割合%、ラベルを円の中や外に表示できる。
ガラケーやスマホでも見ることができる。

1. 使用ファイル2. 使い方3. サンプル

最近、グラフを作るのは、CGI系のフラッシュグラフとは異なり、HTMLへの組み込みが簡単なJavascriptライブラリーが主流になっています。
主なJavascriptライブラリーには、 Chart.jsTauchartsC3.jsGoogle Chartsccchart(canvasChart)amCharts(有料)や
Highcharts(有料)などがあります。
その中で、Chart.js(フリー) はシンプルでデザイン性が高くレスポンシブなチャート/グラフを作成可能なJavaScriptライブラリと言われています。

Chart.js がサポートしているグラフ(チャート)の種類は、線グラフ(LineChart)、棒グラフ(BarChart)、レーダーチャート(RadarChart)、
鶏頭図(PolarAreaChart)、円グラフ(Doughnut and Pie Chart)、バブルチャート(BubbleChart)および散布図(ScatterChart)があります。
このページでは、棒グラフ、線グラフ、円グラフについて扱います。

 1.使用ファイル

Chart.js の最新バージョンを、GitHub のリリースからダウンロードするか、 Chart.js CDN を使用します。
なお、Chart.js には別バージョンとしてデータラベルプラグイン版(chartjs-plugin-datalabels)が がありますが、このページでは扱いません。
このページで扱うデータラベルなどのプラグインは、基本のChart.jsバージョンが規定する機能です。
また、グラフのデータをCSVファイルから読み込む場合は、csvdata.jsを使用します。 CSVデータ読み込みに関しては、Qiitaサイトを参考にさせていただきました。

     使用ファイル

  1. xxxxx.html : グラフを表示する自作ページ。
  2. Chart.jsGitHub のリリースから「Chart.js.zip」をダウンロードするか、 Chart.js CDN を使用します。(必須)
  3. labeling-pulugin.js:データラベルなどのラベル関係の表示をする4つのプラグイン。下の3. サンプルにソースコードがあります。
  4. csvdata-read.js : グラフのデータをCSVファイルから読み込む場合、必要になります。下の3. サンプルにソースコードがあります。

 2.使い方

使い方はつぎのとおりです。 HTMLの作り方は、つぎのいずれかの構成になるでしょう。

構成1
HTML ・chart.jsインクルード
・chart.jsグラフ描写javascriptインクルード
・ラベル関係プラグインjavascriptインクルード
・CSVデータ読み込みjavascriptインクルード

■canvas域(グラフ描写域)定義
chart.js ・chart.js

グラフ描写javascript - ・・・.js ・chart.jsグラフ描写javascript

ラベル関係プラグイン - labeling-pulugin.js ・ラベル関係プラグインjavascript

CSVデータ読み込み - csvdata-read.js ・CSVデータ読み込みjavascript

構成2
HTML ・chart.jsインクルード
・ラベル関係プラグインjavascriptインクルード
・CSVデータ読み込みjavascriptインクルード

■canvas域(グラフ描写域)定義

■グラフ描写javascript
chart.js ・chart.js

ラベル関係プラグイン - labeling-pulugin.js ・ラベル関係プラグインjavascript

CSVデータ読み込み - csvdata-read.js ・CSVデータ読み込みjavascript

     使い方サンプルソースコード


<!-- (1) chart.jsをインクルード CDNサイト使用 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>

<!-- (2) グラフを描画する場所のcanvas域の定義 ここにグラフが挿入されます -->
<div style="width:50%;">
<canvas id="myChart"></canvas>
</div>

<script>
// (3) グラフを描画するためのcanvas域にChartクラスをインスタンス(実体)化  ctx:コンテキストcontextの略
var ctx = document.getElementById("myChart");

// (4) Chart.jsのグラフ描画Chartクラスの記述  
var myBarChart = new Chart(ctx, {    //Chartクラス
    type: 'bar',                             //グラフの種類
    data: {    //データ
        labels: ["赤", "青", "黄", "緑", "紫", "橙"],   //横(X)軸ラベル
        datasets: [{
            label: '得票数',                 //凡例
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',   //赤
                'rgba(54, 162, 235, 0.2)',   //青
                'rgba(255, 206, 86, 0.2)',   //黄
                'rgba(0, 128, 0, 0.2)',      //緑
                'rgba(153, 102, 255, 0.2)',  //紫
                'rgba(255, 159, 64, 0.2)'    //橙
            ],
            borderColor: [
                'rgba(255,99,132,1)',        //赤
                'rgba(54, 162, 235, 1)',     //青
                'rgba(255, 206, 86, 1)',     //黄
                'rgba(0, 128, 0, 1)',        //緑
                'rgba(153, 102, 255, 1)',    //紫
                'rgba(255, 159, 64, 1)'      //橙
            ],
            borderWidth: 1
        }]
    },    //データ終り
    options: {    //オプション
        title: {                             //グラフタイトル
            display: true,
            text: '好きな色はどれ?',        //タイトル
            fontSize: 15                     //フォントサイズ
        },
        scales: {
            yAxes: [{                        //縦(Y)軸
                scaleLabel: {                 //Y軸タイトル設定
                    display: true,            //表示設定
                    labelString: '票数',      //縦(Y)軸タイトル
                    fontSize: 12              //フォントサイズ
                },
                ticks: {
                    beginAtZero:true,         //Y軸目盛は0から
                    max: 20,                  //目盛の最大値
                    min: 0,                   //目盛の最小値
                    stepSize: 2,              //目盛の間隔値
                    fontSize: 11,             //目盛ラベルのフォントサイズ
	            fontColor: "blue",
                }
            }],
            xAxes: [{                        //横(X)軸
                scaleLabel: {                 //X軸タイトル設定
                    display: true,            //表示設定
                    labelString: '好きな色',  //横(X)軸タイトル
                    fontSize: 12              //フォントサイズ
                },
            }]
        }
    }    //オプション終り
});
</script>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>chart.js 使い方 サンプルデモ(1)</title>
    <!-- chart.js インクルード CDNサイト使用 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
</head>
<body>

<!-- グラフを描画する場所のcanvas域の定義 ここにグラフが挿入されます -->
<div style="width:50%;">
<canvas id="myChart"></canvas>
</div>

<script>
// グラフを描画するためのcanvas域にChartクラスをインスタンス(実体)化 
var ctx = document.getElementById("myChart");

// Chart.jsのグラフ描画の記述 Chartクラス
var myBarChart = new Chart(ctx, {
    type: 'bar',                             //グラフの種類
    data: {    //データ
        labels: ["赤", "青", "黄", "緑", "紫", "橙"],   //横(X)軸ラベル
        datasets: [{
            label: '得票数',                 //凡例
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',   //赤
                'rgba(54, 162, 235, 0.2)',   //青
                'rgba(255, 206, 86, 0.2)',   //黄
                'rgba(0, 128, 0, 0.2)',      //緑
                'rgba(153, 102, 255, 0.2)',  //紫
                'rgba(255, 159, 64, 0.2)'    //橙
            ],
            borderColor: [
                'rgba(255,99,132,1)',        //赤
                'rgba(54, 162, 235, 1)',     //青
                'rgba(255, 206, 86, 1)',     //黄
                'rgba(0, 128, 0, 1)',        //緑
                'rgba(153, 102, 255, 1)',    //紫
                'rgba(255, 159, 64, 1)'      //橙
            ],
            borderWidth: 1
        }]
    },    //データ終り
    options: {    //オプション
        title: {                             //グラフタイトル
            display: true,
            text: '好きな色はどれ?',        //タイトル
            fontSize: 15                     //フォントサイズ
        },
        scales: {
            yAxes: [{                        //縦(Y)軸
                scaleLabel: {                 //Y軸タイトル設定
                    display: true,            //表示設定
                    labelString: '票数',      //縦(Y)軸タイトル
                    fontSize: 12              //フォントサイズ
                },
                ticks: {
                    beginAtZero:true,         //Y軸目盛は0から
                    max: 20,                  //目盛の最大値
                    min: 0,                   //目盛の最小値
                    stepSize: 2,              //目盛の間隔値
                    fontSize: 11,             //目盛ラベルのフォントサイズ
	            fontColor: "blue",
                }
            }],
            xAxes: [{                        //横(X)軸
                scaleLabel: {                 //X軸タイトル設定
                    display: true,            //表示設定
                    labelString: '好きな色',  //横(X)軸タイトル
                    fontSize: 12              //フォントサイズ
                },
            }]
        }


    }    //オプション終り
});
</script>

</body>
</html>
  

<!-- このサンプルは、Chart.jsのグラフ描画の記述 Chartクラス から、
データ( data:)とオプション(option:)の記述を外に出して置いています -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <title>chart.js 使い方 サンプルデモ2</title>
</head>
<body>
<!-- グラフを描画する場所のcanvasノード定義 ここにグラフが挿入されます-->
<div style="width: 50%;">
<canvas id="myChart"></canvas>
</div>

<script>

//データ
var chartData =   { 
        labels: ["赤", "青", "黄", "緑", "紫", "橙"],   //横(X)軸ラベル
        datasets: [{
            label: '得票数',                 //凡例
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',   //赤
                'rgba(54, 162, 235, 0.2)',   //青
                'rgba(255, 206, 86, 0.2)',   //黄
                'rgba(0, 128, 0, 0.2)',      //緑
                'rgba(153, 102, 255, 0.2)',  //紫
                'rgba(255, 159, 64, 0.2)'    //橙
            ],
            borderColor: [
                'rgba(255,99,132,1)',        //赤
                'rgba(54, 162, 235, 1)',     //青
                'rgba(255, 206, 86, 1)',     //黄
                'rgba(0, 128, 0, 1)',        //緑
                'rgba(153, 102, 255, 1)',    //紫
                'rgba(255, 159, 64, 1)'      //橙
            ],
            borderWidth: 1
        }]
    }

//オプション
var chartOption = {
        title: {                             //グラフタイトル
            display: true,
            text: '好きな色はどれ?',        //タイトル
            fontSize: 15                     //フォントサイズ
        },
        scales: {
            yAxes: [{                        //縦(Y)軸
                scaleLabel: {                 //Y軸タイトル設定
                    display: true,            //表示設定
                    labelString: '票数',      //縦(Y)軸タイトル
                    fontSize: 12              //フォントサイズ
                },
                ticks: {
                    beginAtZero:true,         //Y軸目盛は0から
                    max: 20,                  //目盛の最大値
                    min: 0,                   //目盛の最小値
                    stepSize: 2,              //目盛の間隔値
                    fontSize: 11,             //目盛ラベルのフォントサイズ
	            fontColor: "blue",
                }
            }],
            xAxes: [{                        //横(X)軸
                scaleLabel: {                 //X軸タイトル設定
                    display: true,            //表示設定
                    labelString: '好きな色',  //横(X)軸タイトル
                    fontSize: 12              //フォントサイズ
                },
            }]
        }


    }

/*下のグラフを描画するためのcanvas域Chartクラスをインスタンス(実体)化 
// Any of the following formats may be used
var ctx = document.getElementById("myChart");
var ctx = document.getElementById("myChart").getContext("2d");
var ctx = $("#myChart");
var ctx = "myChart";
*/
var ctx = document.getElementById("myChart");

// Chart.jsのグラフ描画の記述 Chartクラス
var myChart = new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: chartOption
});
</script>

</body>
</html>
  

 3. サンプル

このページでは、基本的なグラフの棒グラフ、線グラフおよび円グラフの使い方について説明しています。
3つの基本グラフのデータラベルの表示方法や円グラフのパーセンテージ(%)、ラベル(項目名)の表示方法および グラフデータをCSVファイルから読み込む方法について説明します。

表1.サンプルグラフの一覧
項番サンプルchart type備 考
3.1縦棒グラフ、横棒グラフbar, horizontalBarデータはCSVファイル
3.2縦棒グラフ - データラベル - datalabelsbar数値、1000単位カンマ区切り
3.3折れ線グラフlineデータはCSVファイル
3.4折れ線グラフ - データラベル - datalabelsline
3.5円グラフpieデータはCSVファイル
3.6円(ドーナッツ)グラフ - データラベル、ラベル - datalabels, labelsdoughnut
3.7円グラフ - パーセンテージ(割合%) - percentagepie
3.8混合グラフ(縦棒 + 折れ線グラフ)- Combo bar/linebar, lineデータはCSVファイル
3.9円グラフでデータラベル、ラベルおよび割合%を円の外に表示pie, doughnut


 3.1. 棒グラフ - 縦棒グラフ、横棒グラフ(bar , horizontalBar)


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <!-- Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <!-- CSVデータ読み込み -->
    <script src="csvdata-read.js"></script>
    <title>縦棒グラフ サンプル Chart.js 2018.5</title>
</head>
<body>
<!--ここにグラフが挿入されます-->
 <div style="width: 50%;">
     <canvas id="myBarChart"></canvas>
 </div>

<script>
function drawBarChart(data) {   // csvdata-read.jsよりリターン
  // 2)chart.jsのdataset用の配列を用意 このCSVデータは3列=項目名,data1,data2
  var tmpLabels = [], tmpData1 = [], tmpData2 = [];
  for (var row in data) {
    tmpLabels.push(data[row][0])     //項目名
    tmpData1.push(data[row][1])      //データ1(東京)
    tmpData2.push(data[row][2])      //データ2(札幌)
  };
    tmpLabels = tmpLabels.slice( 0, -1 ) ; //最後のカンマ(,)を削除
    tmpData1 = tmpData1.slice( 0, -1 ) ;   //最後のカンマ(,)を削除
    tmpData2 = tmpData2.slice( 0, -1 ) ;   //最後のカンマ(,)を削除

  // 3)chart.jsで描画
  var ctx = document.getElementById("myBarChart").getContext("2d");
  var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: tmpLabels,
      datasets: [
        { label: "東京", data: tmpData1, backgroundColor: "red" },
        { label: "札幌", data: tmpData2, backgroundColor: "blue" }
      ]
    },  //data 終り
        //オプションの設定
    options: {
	     responsive: true,
      title: {
                 display: true,
                 text: '東京、札幌年間平均気温'
                   },

      legend : {
		 position : "right",
		 // display : false,
				},
      scales: {
               yAxes: [{                         //y軸設定
                    display: true,                //表示設定
                    scaleLabel: {                 //軸ラベル設定
                       display: true,             //表示設定
                       labelString: '温度(℃)',  //ラベル
                       fontSize: 12               //フォントサイズ
                    },
                    ticks: {
                        fontSize: 12,            //フォントサイズ
                        callback : function(value, index, values){
					return value + " ℃";
				} 
                    },
                }],
               xAxes: [{                         //x軸設定
                    display: true,                //表示設定
                    barPercentage: 1.0,           //棒グラフ幅
                    categoryPercentage: 0.4,      //棒グラフ幅
                    scaleLabel: {                 //軸ラベル設定
                       display: true,             //表示設定
                       labelString: '(月)',  //ラベル
                       fontSize: 12               //フォントサイズ
                    },
                    ticks: {
                        fontSize: 12             //フォントサイズ
                    },
                }],
      },
 
   }, //options 終り
  });
}

// 1) CSV読み込み csvdata-read.js
csvdata(drawBarChart,"bar-data.csv");

</script>
</body>
</html>


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <!-- Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <!-- CSVデータ読み込みjs -->
    <script src="csvdata-read.js"></script>
    <title>横棒グラフ サンプル Chart.js 2018.5</title>
</head>
<body>
<!--ここにグラフが挿入されます-->
 <div style="width: 50%;">
     <canvas id="myHBarChart"></canvas>
 </div>

<script>
function drawHBarChart(data) {   // csvdata-read.jsよりリターン
  // 2)chart.jsのdataset用の配列を用意 このCSVデータは3列=項目名,data1,data2
  var tmpLabels = [], tmpData1 = [], tmpData2 = [];
  for (var row in data) {
    tmpLabels.push(data[row][0])     //項目名
    tmpData1.push(data[row][1])      //データ1(東京)
    tmpData2.push(data[row][2])      //データ2(札幌)
  };
    tmpLabels = tmpLabels.slice( 0, -1 ) ; //最後のカンマ(,)を削除
    tmpData1 = tmpData1.slice( 0, -1 ) ;   //最後のカンマ(,)を削除
    tmpData2 = tmpData2.slice( 0, -1 ) ;   //最後のカンマ(,)を削除

  // 3)chart.jsで描画
  var ctx = document.getElementById("myHBarChart").getContext("2d");
  var myHBarChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
      labels: tmpLabels,
      datasets: [
        { label: "東京", data: tmpData1, backgroundColor: "red" },
        { label: "札幌", data: tmpData2, backgroundColor: "blue" }
      ]
    },  //data 終り
        //オプションの設定
    options: {
	     responsive: true,
      title: {
                 display: true,
                 text: '東京、札幌年間平均気温'
                   },

      legend : {
		 position : "right",
		 // display : false,
				},
      scales: {
               xAxes: [{                         //y軸設定
                    display: true,                //表示設定
                    scaleLabel: {                 //軸ラベル設定
                       display: true,             //表示設定
                       labelString: '温度(℃)',  //ラベル
                       fontSize: 12               //フォントサイズ
                    },
                    ticks: {
                        fontSize: 12,            //フォントサイズ
                        callback : function(value, index, values){
					return value + " ℃";
				} 
                    },
                }],
               yAxes: [{                         //x軸設定
                    display: true,                //表示設定
                    //barPercentage: 0.4,           //棒グラフ幅
                    //categoryPercentage: 0.4,      //棒グラフ幅
                    scaleLabel: {                 //軸ラベル設定
                       display: true,             //表示設定
                       labelString: '(月)',  //ラベル
                       fontSize: 12               //フォントサイズ
                    },
                    ticks: {
                        fontSize: 12             //フォントサイズ
                    },
                }],
      },
 
   }, //options 終り
  });
}

// 1) CSV読み込み csvdata-read.js
csvdata(drawHBarChart,"bar-data.csv");

</script>
</body>
</html>

//*** csvdata-read.js ***//

// 3) CSVから2次元配列に変換
function csv2Array(str) {
  var csvData = [];
  var cmt = /^\*/;          //行の先頭文字に*(半角)がある場合コメント行
  str = str.replace(/\r\n/g, '\n');     // 追加 CRを削除 
  str = str.replace(/\n+/g, '\n');      // 追加 空行を削除
  //str = str.replace(/\s+,|,\s+/g, ','); // 追加 不要な空白を削除
  var lines = str.split("\n");
  for (var i = 0; i < lines.length; ++i) { 
    var li = lines[i];
    var cells = lines[i].split(",");
	if(li.match(cmt)){       //コメント行判定
		continue;        //コメント行スキップ
   	}    
    csvData.push(cells);
  }
  return csvData;
}

//メイン関数csvdata
function csvdata(func,fl) {    // func:Chartクラス関数名 fl:CSVファイルのURL
  // 1) ajaxでCSVファイルをロード
  var req = new XMLHttpRequest();
  var filePath = fl;  // fl CSVファイル名(URL)
  req.open("GET", filePath, true);
  req.onload = function() {
    // 2) CSVデータ変換の呼び出し
    data = csv2Array(req.responseText);
    // 4) chart.js描画のChartクラス関数へリターンし、CSVデータを渡す
    func(data);     
  }
  req.send(null);
}

*** 1列目:項目名、2列目:東京年間平均気温、3列目:札幌年間平均気温  コメント行挿入可 ***
1月,5.2 ,-3.6         
2月,5.7 ,-3.1
3月,8.7 ,0.6
4月,13.9,7.1
5月,18.2,12.4
6月,21.4,16.7
7月,25.0,20.5
8月,26.4,22.3
9月,22.8,18.1
10月,17.5,11.8
11月,12.1,4.9
12月,7.6,-0.9

 3.2. 縦棒グラフ - データラベル(bar - datalabels)

ここの縦棒グラフのサンプルでは、データラベルの表示、数値の3桁1000単位カンマ区切り挿入およびツールチップ(マウスオーバーによるデータラベルの吹き出し表示) 変更などの事例が含まれています。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>棒グラフ データラベル chart.js 使い方 サンプルデモ</title>
    <!-- Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <!-- ラベル関係プラグインjs -->
    <script src="js/labeling-plugin.js"></script>
</head>
<body>
<div style="width:50%;">
	<canvas id="myChart"></canvas>
</div>

<script>
//グラフ描画
var ctx = document.getElementById("myChart"); 
// Chart.jsのグラフ描画の記述 
var myBarChart = new Chart(ctx, {
    type: 'bar',                             //グラフの種類
    data: {    //データ
        labels: ["赤", "青", "黄", "緑", "紫", "橙"],   //横(X)軸ラベル
        datasets: [{
            label: '得票数',                 //凡例
            data: [1200, 1900, 300, 500, 200, 300],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',   //赤
                'rgba(54, 162, 235, 0.2)',   //青
                'rgba(255, 206, 86, 0.2)',   //黄
                'rgba(0, 128, 0, 0.2)',      //緑
                'rgba(153, 102, 255, 0.2)',  //紫
                'rgba(255, 159, 64, 0.2)'    //橙
            ],
            borderColor: [
                'rgba(255,99,132,1)',        //赤
                'rgba(54, 162, 235, 1)',     //青
                'rgba(255, 206, 86, 1)',     //黄
                'rgba(0, 128, 0, 1)',        //緑
                'rgba(153, 102, 255, 1)',    //紫
                'rgba(255, 159, 64, 1)'      //橙
            ],
            borderWidth: 1
        }]
    },    //データ終り
    options: {    //オプション
        title: {                             //グラフタイトル
            display: true,
            text: '好きな色はどれ?',        //タイトル
            fontSize: 15                     //フォントサイズ
        },
        scales: {
            yAxes: [{                        //縦(Y)軸
                scaleLabel: {                 //Y軸タイトル設定
                    display: true,            //表示設定
                    labelString: '票数',      //縦(Y)軸タイトル
                    fontSize: 12              //フォントサイズ
                },
                ticks: {
                    beginAtZero:true,         //Y軸目盛は0から
                    max: 2000,                  //目盛の最大値
                    min: 0,                   //目盛の最小値
                    stepSize: 100,              //目盛の間隔値
                    fontSize: 11,             //目盛ラベルのフォントサイズ
	            fontColor: "blue",
                    callback: function(label, index, labels) { // 1000単位カンマ区切り 
                            return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');  // +' 件 ';
                     }
                }
            }],
            xAxes: [{                        //横(X)軸
                scaleLabel: {                 //X軸タイトル設定
                    display: true,            //表示設定
                    labelString: '好きな色',  //横(X)軸タイトル
                    fontSize: 12              //フォントサイズ
                },
            }]
        },
        tooltips: { /* 吹き出しデータラベル 1000単位カンマ挿入 */
               callbacks: {
                  title: function (tooltipItem, data){
                       //Return value for tooltip title
                      return tooltipItem[0].xLabel + ' 色 が好き!'; 
                   },
                  label: function(tooltipItem, data){ 
                       return "投票数: " + tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')+" 票";
                   }
                }
        }
    },    //オプション終り
     plugins:[DataLabelPluginB],  //データラベルプラグイン起動
});
</script>

</body>
</html>


//*** (1)Define a plugin to provide data labels データラベルプラグイン 文字色:黒 基本chart.js  ***//
var DataLabelPluginB = {afterDatasetsDraw:function(chart,easing){
     var ctx=chart.ctx;
     chart.data.datasets.forEach(function(dataset,i){
      var meta=chart.getDatasetMeta(i);
      if(!meta.hidden){meta.data.forEach(function(element,index){
         ctx.fillStyle='rgb(0, 0, 0)';  //文字色:黒
         var fontSize=16;
         var fontStyle='normal';
         var fontFamily='Helvetica Neue';ctx.font=Chart.helpers.fontString(fontSize,fontStyle,fontFamily);
         var dataString = dataset.data[index].toString();  // データラベル(項目の値)の場合
         //var dataString = chart.data.labels[index];      // ラベル(項目名)の場合
         dataString = dataString.replace(/\B(?=(\d{3})+(?!\d))/g, ',');  //1000単位カンマ挿入したい場合
         //var dataString=chart.data.labels[index]; 
         //var dataString=chart.data.data[index];
         ctx.textAlign='center';
         ctx.textBaseline='middle';
         var padding=5;
         var position=element.tooltipPosition();
         ctx.fillText(dataString,position.x,position.y-(fontSize/2)-padding);
        });
     }});
}};

 3.3. 折れ線グラフ(line)

この折れ線グラフは、グラフ描写のJavascriptをjsファイルで作成しています。こうすることにより、HTMLがスッキリします。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- Chart.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
  <!--  データCSVファイル読み込みjs -->
  <script src="js/csvdata-read.js"></script>
  <!--  グラフ描写js -->
  <script src="js/line-mychart.js"></script>

    <title>折れ線グラフ サンプル Chart.js</title>
</head>
<body>
  <!--ここにグラフが挿入されます-->
  <div style="width: 50%;">
      <canvas id="myLineChart"></canvas>
  </div>
</body>
</html>

//*** line-mychart.js 折れ線グラフ描写 ***//

function drawLineChart(data) {
  // 2)chart.jsのdataset用の配列を用意
  var tmpLabels = [], tmpData1 = [], tmpData2 = [], tmpData3 = [];
  for (var row in data) {
    tmpLabels.push(data[row][0]) // 
    tmpData1.push(data[row][1])  //固定電話
    tmpData2.push(data[row][2])  //携帯
    tmpData3.push(data[row][3])  //スマホ
   };
    tmpLabels = tmpLabels.slice( 0, -1 ) ; //最後のカンマ(,)を削除
    tmpData1 = tmpData1.slice( 0, -1 ) ;   //最後のカンマ(,)を削除
    tmpData2 = tmpData2.slice( 0, -1 ) ;   //最後のカンマ(,)を削除
    tmpData3 = tmpData3.slice( 0, -1 ) ;   //最後のカンマ(,)を削除

  // 3)chart.jsで描画
  var ctxline = document.getElementById("myLineChart");  //.getContext("2d");
  var myLineChart = new Chart(ctxline, {

    //グラフの種類
     type: 'line',
    //データの設定
    data: {
      // 3 データ項目のラベル
      labels: tmpLabels, //["固定電話", "携帯電話", "スマホ"],
      //データセット
      datasets: [
          {
              //凡例
              label: "固定電話",
              //面の表示
              fill: false,
              //線のカーブ
              lineTension: 0,
              //背景色
              backgroundColor: "rgba(179,181,198,0.2)",
              //枠線の色
              borderColor: "rgba(179,181,198,1)",
              //結合点の枠線の色
              pointBorderColor: "rgba(179,181,198,1)",
              //結合点の背景色
              pointBackgroundColor: "#fff",
              //結合点のサイズ
              pointRadius: 5,
              //結合点のサイズ(ホバーしたとき)
              pointHoverRadius: 8,
              //結合点の背景色(ホバーしたとき)
              pointHoverBackgroundColor: "rgba(179,181,198,1)",
              //結合点の枠線の色(ホバーしたとき)
              pointHoverBorderColor: "rgba(220,220,220,1)",
              //結合点より外でマウスホバーを認識する範囲(ピクセル単位)
              pointHitRadius: 15,
              //グラフのデータ
              data: tmpData1
          },
          {
              //凡例
              label: "携帯電話",
              //面の表示
              fill: false,
              //線のカーブ
              lineTension: 0,
              //背景色
              backgroundColor: "rgba(75,192,192,0.4)",
              //枠線の色
              borderColor: "rgba(75,192,192,1)",
              //結合点の枠線の色
              pointBorderColor: "rgba(75,192,192,1)",
              //結合点の背景色
              pointBackgroundColor: "#fff",
              //結合点のサイズ
              pointRadius: 5,
              //結合点のサイズ(ホバーしたとき)
              pointHoverRadius: 8,
              //結合点の背景色(ホバーしたとき)
              pointHoverBackgroundColor: "rgba(75,192,192,1)",
              //結合点の枠線の色(ホバーしたとき)
              pointHoverBorderColor: "rgba(220,220,220,1)",
              //結合点より外でマウスホバーを認識する範囲(ピクセル単位)
              pointHitRadius: 10,
              //グラフのデータ
              data:tmpData2
          },
          {
              //凡例
              label: "スマホ",
              //面の表示
              fill: false,
              //線のカーブ
              lineTension: 0,
              //背景色
              backgroundColor: "rgba(255,102,255,0.4)",
              //枠線の色
              borderColor: "rgba(255,0,0,1)",
              //結合点の枠線の色
              pointBorderColor: "rgba(75,192,192,1)",
              //結合点の背景色
              pointBackgroundColor: "#fff",
              //結合点のサイズ
              pointRadius: 5,
              //結合点のサイズ(ホバーしたとき)
              pointHoverRadius: 8,
              //結合点の背景色(ホバーしたとき)
              pointHoverBackgroundColor: "rgba(255,0,0,1)",
              //結合点の枠線の色(ホバーしたとき)
              pointHoverBorderColor: "rgba(220,220,220,1)",
              //結合点より外でマウスホバーを認識する範囲(ピクセル単位)
              pointHitRadius: 10,
              //グラフのデータ
              data:tmpData3
          }

      ]
    },
          options: {
	     //responsive: true,
             title: {
                 display: true,
                 text: '情報通信端末の世帯保有率の推移'
                   },
          }

  });

}

// 1) CSVデータ読み込み関数csvdata起動
csvdata(drawLineChart,'line-data.csv');

//*** csvdata-read.js CSVデータ読み込み ***//

// 3) CSVから2次元配列に変換
function csv2Array(str) {
  var csvData = [];
  var cmt = /^\*/;          //行の先頭文字に*(半角)がある場合コメント行
  str = str.replace(/\r\n/g, '\n');     // 追加 CRを削除 
  str = str.replace(/\n+/g, '\n');      // 追加 空行を削除
  //str = str.replace(/\s+,|,\s+/g, ','); // 追加 不要な空白を削除
  var lines = str.split("\n");
  for (var i = 0; i < lines.length; ++i) { 
    var li = lines[i];
    var cells = lines[i].split(",");
	if(li.match(cmt)){       //コメント行判定
		continue;        //コメント行スキップ
   	}    
    csvData.push(cells);
  }
  return csvData;
}

//メイン関数csvdata
function csvdata(func,fl) {    // func:Chartクラス関数名 fl:CSVファイルのURL
  // 1) ajaxでCSVファイルをロード
  var req = new XMLHttpRequest();
  var filePath = fl;  // fl CSVファイル名(URL)
  req.open("GET", filePath, true);
  req.onload = function() {
    // 2) CSVデータ変換の呼び出し
    data = csv2Array(req.responseText);
    // 4) chart.js描画のChartクラス関数へリターンし、CSVデータを渡す
    func(data);     
  }
  req.send(null);
}

2006,90.1,91.3, 
2007,90.7,95.0,
2008,90.9,95.6,
2009,91.2,96.3,
2010,85.8,93.2,9.7
2011,83.8,94.5,29.3
2012,79.3,94.5,49.5
2013,79.2,94.8,62.6 
2014,75.7,94.6,64.2
2015,75.6,95.8,72.0 

 3.4. 折れ線グラフ - データラベル(line - datalabels)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <!-- ラベル関係プラグインjs -->
    <script src="js/labeling-plugin.js"></script>
    <title>折れ線グラフ データラベル 基本chart.js</title>
</head>
<body>
 <!--ここにグラフが挿入されます-->
 <div style="width: 50%;">
         <canvas id="myLineChart"></canvas>
 </div>

<script>
  //グラフ描写
  //Chartクラス
  var ctxline = document.getElementById("myLineChart");  //.getContext("2d");
  var myLineChart = new Chart(ctxline, {
    //グラフの種類
     type: 'line',
    //データの設定
    data: {
      // 3 データ項目のラベル
      labels: ["2006","2007","2008","2009","2010","2011","2012","2013","2014","2015"],
      //データセット
      datasets: [
          {
              //凡例
              label: "スマホ",
              //面の表示
              fill: false,
              //線のカーブ
              lineTension: 0,
              //背景色
              backgroundColor: "rgba(255,102,255,0.4)",
              //枠線の色
              borderColor: "rgba(255,0,0,1)",
              //結合点の枠線の色
              pointBorderColor: "rgba(75,192,192,1)",
              //結合点の背景色
              pointBackgroundColor: "#fff",
              //結合点のサイズ
              pointRadius: 5,
              //結合点のサイズ(ホバーしたとき)
              pointHoverRadius: 8,
              //結合点の背景色(ホバーしたとき)
              pointHoverBackgroundColor: "rgba(255,0,0,1)",
              //結合点の枠線の色(ホバーしたとき)
              pointHoverBorderColor: "rgba(220,220,220,1)",
              //結合点より外でマウスホバーを認識する範囲(ピクセル単位)
              pointHitRadius: 10,
              //グラフのデータ
              data:[0,0,0,0,9.7,29.3,49.5,62.6,64.2,72.0]
          }

      ]
    },

 //オプション
   options: {
	     //responsive: true,
             title: {
                 display: true,
                 text: '情報通信端末スマホの世帯保有率の推移'
                   },
             scales: {
               yAxes: [
                  {                         
                    display: true,                //表示設定
                    scaleLabel: {                 //軸ラベル設定
                       display: true,             //表示設定
                       labelString: '保有率(%)',  //ラベル
                       fontSize: 12               //フォントサイズ
                    },
                    ticks: {
                       beginAtZero: true,
                       max: 100,
                       min: 0,
                       stepSize: 20,
                       fontSize: 12             //フォントサイズ
                    },
                 },
               ],
               xAxes: [{                         //x軸設定
                    display: true,                //表示設定
                    scaleLabel: {                 //軸ラベル設定
                       display: true,             //表示設定
                       labelString: '(年)',  //ラベル
                       fontSize: 12               //フォントサイズ
                    },
                    ticks: {
                        fontSize: 12             //フォントサイズ
                    },
                }],
		tooltips: {
			mode: 'point',
			intersect: true,
				},

              },

   },
     plugins:[DataLabelPluginB],  //データラベルプラグイン起動
});
</script>
</body>
</html>

//*** (1)Define a plugin to provide data labels データラベルプラグイン 文字色:黒 基本chart.js  ***//
var DataLabelPluginB = {afterDatasetsDraw:function(chart,easing){
     var ctx=chart.ctx;
     chart.data.datasets.forEach(function(dataset,i){
      var meta=chart.getDatasetMeta(i);
      if(!meta.hidden){meta.data.forEach(function(element,index){
         ctx.fillStyle='rgb(0, 0, 0)';  //文字色:黒
         var fontSize=16;
         var fontStyle='normal';
         var fontFamily='Helvetica Neue';ctx.font=Chart.helpers.fontString(fontSize,fontStyle,fontFamily);
                    var dataString = dataset.data[index].toString();  // データラベル(項目の値)の場合
                    //var dataString = chart.data.labels[index];      // ラベル(項目名)の場合
         //var dataString=chart.data.labels[index]; 
         //var dataString=chart.data.data[index];
         ctx.textAlign='center';
         ctx.textBaseline='middle';
         var padding=5;
         var position=element.tooltipPosition();
         ctx.fillText(dataString,position.x,position.y-(fontSize/2)-padding);
        });
     }});
}};

 3.5. 円グラフ(pie)


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <!-- Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <!-- CSVデータ読み込みjs -->
    <script src="js/csvdata-read.js"></script>
    <title>円グラフ サンプル Chart.js 2018.5</title>
</head>
<body>
 <!--ここにグラフが挿入されます-->
 <div style="width: 50%;">
    <canvas id="myPieChart"></canvas>
 </div>

<script>
function drawPieChart(data) {
  // 2)chart.jsのdataset用の配列を用意
  var tmpLabels = [], tmpData1 = [];
  for (var row in data) {
    tmpLabels.push(data[row][0]) // 
    tmpData1.push(data[row][1])  //
   };

    //var last = tmpLabels.slice(-1); alert("L" + last);
    //if(last == ","){  alert(last);
    //alert(tmpLabels.tailCut(",")); // と表示される。
 
    //tmpLabels = tmpLabels.slice( 0, -1 ) ;
    //  }
  // 3)chart.jsで描画
  var ctx = document.getElementById("myPieChart");  //.getContext("2d");

  var myPieChart = new Chart(ctx, {

  //グラフの種類
  type: 'pie',
  //データの設定
  data: {
      // 3 データ項目のラベル
      labels: tmpLabels, //["Red", "Green", "Yellow"],
      //データセット
      datasets: [{
          //背景色
          backgroundColor: [
              "#FF6384",
              "#36A2EB",
              "#FFCE56"
          ],
          //背景色(ホバーしたとき)
          hoverBackgroundColor: [
              "#FF6384",
              "#36A2EB",
              "#FFCE56"
          ],
          //グラフのデータ
          data: tmpData1,  //[300, 50, 100]

      }]
   },
          //オプションの設定
          options: {
	     responsive: true,
             title: {
                 display: true,
                 text: '2017年携帯電話キャリア別シェア'
                }


			},
        // plugins: [dataLabelPlugin], // 
   });

}
csvdata(drawPieChart,"pie-data.csv"); // 1)CSVデータ読み込み関数csvdata起動

</script>
</body>
</html>

//*** csvdata-read.js CSVデータ読み込み ***//

// 3) CSVから2次元配列に変換
function csv2Array(str) {
  var csvData = [];
  var cmt = /^\*/;          //行の先頭文字に*(半角)がある場合コメント行
  str = str.replace(/\r\n/g, '\n');     // 追加 CRを削除 
  str = str.replace(/\n+/g, '\n');      // 追加 空行を削除
  //str = str.replace(/\s+,|,\s+/g, ','); // 追加 不要な空白を削除
  var lines = str.split("\n");
  for (var i = 0; i < lines.length; ++i) { 
    var li = lines[i];
    var cells = lines[i].split(",");
	if(li.match(cmt)){       //コメント行判定
		continue;        //コメント行スキップ
   	}    
    csvData.push(cells);
  }
  return csvData;
}

//メイン関数csvdata
function csvdata(func,fl) {    // func:Chartクラス関数名 fl:CSVファイルのURL
  // 1) ajaxでCSVファイルをロード
  var req = new XMLHttpRequest();
  var filePath = fl;  // fl CSVファイル名(URL)
  req.open("GET", filePath, true);
  req.onload = function() {
    // 2) CSVデータ変換の呼び出し
    data = csv2Array(req.responseText);
    // 4) chart.js描画のChartクラス関数へリターンし、CSVデータを渡す
    func(data);     
  }
  req.send(null);
}

NTTドコモ-46%,75678300
KDDI(au)-30%,50638200
ソフトバンクモバイル-24%,39505300

 3.6. 円(ドーナッツ)グラフ - データラベルおよびラベル(項目名)(doughnut - datalabels, labels)



<!DOCTYPE html> <!-- レスポンシブ対応HTML例  -->
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <!-- レスポンシブ対応 全デバイス -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!-- Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
    <!-- ラベル関係プラグインjs -->
    <script src="js/labeling-plugin.js"></script>
    <title>円グラフ データラベル サンプル Chart.js</title>

<style>
/* レスポンシブ スマホ用の例 */
@media only screen and (max-width: 480px) {
	#body { margin-left: 0; }
	
	/* 投稿フォーム */
	#menu-table { margin: 0 auto; text-align: center; }
	#form { width: 96%; margin: 10px auto; }
    #form th, #form td {
    	text-align: left;
		width: 100%;
        display: block;
        padding: 6px 3px;
        border-top: none;
    }
    #form tr:first-child th	{ border-top: 1px solid #666; }
    p.btn input { width: 10em; }
    
	/* 小見出し */
	h2 { margin: 1em 3px; width: 90%; }
	
	/* サンクス */
	p.msg { margin: 1em auto; }
}
</style>

</head>
<body>
<!-- ここにグラフが挿入されます レスポンシブ -->
<div class="chart-container" style="position: relative; width:100vw; height:60vh">
    <canvas id="myPieDlabelsChart"></canvas>
</div>

<script>
 //グラフ描写 
  var my_chart2 = document.getElementById("myPieDlabelsChart"); 
  var chart=new Chart(my_chart2,{
     type:'doughnut',
     data:{
          labels:["T","Ma","N","H","S","F","D","Mi"],
          datasets:[{label:"Sample",
          backgroundColor:["#3F51B5","#F44336","#FF9800","#4CAF50","#9C27B0","#00BCD4","#E91E63","#66FF66"],
          data:[3166,977,950,820,794,727,722,555],
        }]
     },
     options:{
        title:{display:true,text:"自動車主要8社2016年国内生産実績(千台)データラベル(項目の値)"},
        responsive: true,            //*レスポンシブ
        maintainAspectRatio: false,  //*レスポンシブ trueまたはfalse
     },
        plugins:[DataLabelPluginW],  //データラベルプラグイン起動
   });

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <!-- レスポンシブ 全デバイス -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!-- Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
    <!-- ラベル関係プラグインjs -->
    <script src="js/labeling-plugin.js"></script>
    <title>円グラフ ラベル サンプル Chart.js</title>

<style>
/* レスポンシブ スマホ用の例 */
@media only screen and (max-width: 480px) {
	#body { margin-left: 0; }
	
	/* 投稿フォーム */
	#menu-table { margin: 0 auto; text-align: center; }
	#form { width: 96%; margin: 10px auto; }
    #form th, #form td {
    	text-align: left;
		width: 100%;
        display: block;
        padding: 6px 3px;
        border-top: none;
    }
    #form tr:first-child th	{ border-top: 1px solid #666; }
    p.btn input { width: 10em; }
    
	/* 小見出し */
	h2 { margin: 1em 3px; width: 90%; }
	
	/* サンクス */
	p.msg { margin: 1em auto; }
}
</style>

</head>
<body>
<!-- ここにグラフが挿入されます レスポンシブ -->
<div class="chart-container" style="position: relative; width:100vw; height:60vh">
    <canvas id="myPieLabelsChart"></canvas>
</div>

<script>
 //グラフ描写 
 var ctx = document.getElementById("myPieLabelsChart"); 
 //Chartクラス
 var chart=new Chart(ctx,{
     type:'doughnut',
     data:{
        labels:["T","Ma","N","H","S","F","D","Mi"],
        datasets:[{
           label:"Sample",
           backgroundColor:["#3F51B5","#F44336","#FF9800","#4CAF50","#9C27B0","#00BCD4","#E91E63","#66FF66"],
           data:[3166,977,950,820,794,727,722,555],
        }]
      },
      options:{
         title:{
            display:true,
            text:"自動車主要8社2016年国内生産実績(千台)ラベル(項目名)"
          },
         responsive: true,            //*レスポンシブ
         maintainAspectRatio: false,  //*レスポンシブ trueまたはfalse
      },
      plugins:[LabelPlugin],  //ラベルプラグイン起動
   });

</script>

</body>
</html>

//*** (2)Define a plugin to provide data labels データラベルプラグイン 文字色:白  基本chart.js  ***//
var DataLabelPluginW = {afterDatasetsDraw:function(chart,easing){
     var ctx=chart.ctx;
     chart.data.datasets.forEach(function(dataset,i){
      var meta=chart.getDatasetMeta(i);
      if(!meta.hidden){meta.data.forEach(function(element,index){
         ctx.fillStyle='rgb(255, 255, 255)';  //文字色:白
         var fontSize=16;
         var fontStyle='normal';
         var fontFamily='Helvetica Neue';ctx.font=Chart.helpers.fontString(fontSize,fontStyle,fontFamily);
         var dataString = dataset.data[index].toString();  // データラベル(項目の値)の場合
         //var dataString = chart.data.labels[index];      // ラベル(項目名)の場合
         dataString = dataString.replace(/\B(?=(\d{3})+(?!\d))/g, ',');  //1000単位カンマ挿入の場合
         //var dataString=chart.data.labels[index]; 
         //var dataString=chart.data.data[index];
         ctx.textAlign='center';
         ctx.textBaseline='middle';
         var padding=5;
         var position=element.tooltipPosition();
         ctx.fillText(dataString,position.x,position.y-(fontSize/2)-padding);
        });
     }});
}};

//*** (3)Define a plugin to provide labels ラベル(項目名)プラグイン 文字色:白  基本chart.js  ***//
var LabelPlugin = {afterDatasetsDraw:function(chart,easing){
     var ctx=chart.ctx;
     chart.data.datasets.forEach(function(dataset,i){
      var meta=chart.getDatasetMeta(i);
      if(!meta.hidden){meta.data.forEach(function(element,index){
         ctx.fillStyle='rgb(255, 255, 255)';  //文字色:白
         var fontSize=16;
         var fontStyle='normal';
         var fontFamily='Helvetica Neue';ctx.font=Chart.helpers.fontString(fontSize,fontStyle,fontFamily);
                    //var dataString = dataset.data[index].toString();  // データラベル(項目の値)の場合
                    var dataString = chart.data.labels[index];      // ラベル(項目名)の場合
         //var dataString=chart.data.labels[index]; 
         //var dataString=chart.data.data[index];
         ctx.textAlign='center';
         ctx.textBaseline='middle';
         var padding=5;
         var position=element.tooltipPosition();
         ctx.fillText(dataString,position.x,position.y-(fontSize/2)-padding);
        });
     }});
}};

 3.7. 円グラフ - パーセンテージ(割合%)(pie - Percentages)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>円グラフ パーセンテージ-割合(%)サンプル Chart.js</title>
    <!-- Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
    <!-- ラベル関係プラグイン -->
    <script src="js/labeling-plugin.js"></script>
</head>
<body>
 <!--ここにグラフが挿入されます-->
 <div style="width:50%;">
        <canvas id="myPiePercentChart" style="width: 100%; height: auto;"></canvas>
 </div>

<script>
// グラフ描写
 var ctxpiepercent = document.getElementById("myPiePercentChart");
 //Chartクラス
 var chart = new Chart(ctxpiepercent, {
     type: 'pie',
     data: {
         labels: ["青", "赤", "橙", "緑", "紫", "青空", "あずき"],
         datasets: [{
              label: "Sample",
              backgroundColor: ["#3F51B5", "#F44336", "#FF9800", "#4CAF50", "#9C27B0", "#00BCD4", "#E91E63"],
              data: [128, 120, 46, 82, 67, 46, 16],
         }]
      },
      options: {
         title: {
              display: true,
              text: "パーセンテージ(割合%)"
         },
         legend:{  
              position : "top"
           },
         responsive : true,
         maintainAspectRatio: false,
      },
     plugins: [PercentagePlugin],
 });
//
</script>

</body>
</html>

//*** (4)Define a plugin to provide percentage 割合(%)プラグイン 文字色:白  基本chart.js  ***//
                    var PercentagePlugin = {
                        afterDatasetsDraw: function (chart, easing) {
                            // To only draw at the end of animation, check for easing === 1
                            var ctx = chart.ctx;

                            chart.data.datasets.forEach(function (dataset, i) {
                                var dataSum = 0;
                                dataset.data.forEach(function (element){
                                     dataSum += parseInt(element);
                                });
                                //alert(dataSum);
                                var meta = chart.getDatasetMeta(i);
                                if (!meta.hidden) {
                                    meta.data.forEach(function (element, index) {
                                        // Draw the text in black, with the specified font
                                        ctx.fillStyle = 'rgb(255, 255, 255)';  //文字色:白

                                        var fontSize = 12;
                                        var fontStyle = 'normal';
                                        var fontFamily = 'Helvetica Neue';
                                        ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

                                        // Just naively convert to string for now
                                        var labelString = chart.data.labels[index];
                                        var dataString = (Math.round(parseInt(dataset.data[index]) / dataSum * 1000)/10).toString() + "%";

                                        // Make sure alignment settings are correct
                                        ctx.textAlign = 'center';
                                        ctx.textBaseline = 'middle';

                                        var padding = 5;
                                        var position = element.tooltipPosition();
                                        ctx.fillText(labelString, position.x, position.y - (fontSize / 2) - padding);
                                        ctx.fillText(dataString, position.x, position.y + (fontSize / 2) - padding);
                                    });
                                }
                            });
                        }
                    };

 3.8. 混合グラフ(縦棒 + 折れ線グラフ)(Combo bar/line)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
    <!-- Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
    <!-- CSVデータ読み込みjs -->
    <script src="js/csvdata-read.js"></script>
    <!-- 棒グラフ+折れ線グラフ描写js -->
    <script src="js/bar-line-mychart.js"></script>
<title>棒グラフ+折れ線グラフ サンプル Combo bar/line Chart.js</title>
</head>
<body>
    <!--ここにグラフが挿入されます-->
    <div style="width: 50%;">
            <canvas id="myBarLineChart"></canvas>
    </div>
</body>
</html>

// 棒グラフ+折れ線グラフ Combo bar/line

function drawBarLineChart(data) {
  // 2)chart.jsのdataset用の配列を用意。 
  var tmpLabels = [], tmpData1 = [], tmpData2 = [];
  for (var row in data) {
    tmpLabels.push(data[row][0])   //項目名
    tmpData1.push(data[row][1])    //棒グラフの気温
    tmpData2.push(data[row][2])    //折れ線グラフの雨量
  };
  tmpLabels = tmpLabels.slice( 0, -1 ) ; //末尾の余分なカンマ(,)を削除
  tmpData1 = tmpData1.slice( 0, -1 ) ;   //末尾の余分なカンマ(,)を削除
  tmpData2 = tmpData2.slice( 0, -1 ) ;   //末尾の余分なカンマ(,)を削除

  // 3)chart.jsで描画
  var ctx = document.getElementById("myBarLineChart").getContext("2d");
  var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
      datasets: [
        { label: "東京雨量",  //線グラフ 
           data: tmpData2,    // [52.3, 56.1, 117.5, 124.5, 137.8, 167.7, 153.5, 168.2, 209.9, 197.8, 92.5, 51.0], // このデータセット
           yAxisID: "y-axis-right", type: 'line', lineTension: 0,
           fill: false,
           backgroundColor: "blue", pointBackgroundColor: "rgba(0,0,255,0.8)", // 追加

          },
        { label: "東京気温", data: tmpData1, backgroundColor: "pink", borderColor: "#000000", borderWidth: 2,
                             yAxisID: "y-axis-left", yAxisID: "y-axis-left" }, //縦棒グラフ CSVデータ

       ],
           labels: tmpLabels,    //項目名はCSVデータ  
      },

          //オプションの設定
    options: {
	     responsive: true,
             title: {
                 display: true,
                 text: '東京年間平均気温と降雨量'
                   },
             scales: {
               yAxes: [
                  {                         //左側y軸設定
                    id: "y-axis-left",
                    position: "left", // どちら側に表示される軸か?

                    display: true,                //表示設定
                    barPercentage: 0.4,           //棒グラフ幅
                    categoryPercentage: 0.4,      //棒グラフ幅
                    scaleLabel: {                 //軸ラベル設定
                       display: true,             //表示設定
                       labelString: '温度(℃)',  //ラベル
                       fontSize: 12               //フォントサイズ
                    },
                    ticks: {
                       beginAtZero: true,
                       max: 30,
                       min: 0,
                       stepSize: 5,
                       fontSize: 12             //フォントサイズ
                    },
                 },

                  {                         //右側y軸設定
                    id: "y-axis-right",
                    position: "right", // どちら側に表示される軸か?
                    display: true,                //表示設定
                    barPercentage: 0.4,           //線グラフ幅
                    categoryPercentage: 0.4,      //線グラフ幅
                    scaleLabel: {                 //軸ラベル設定
                       display: true,             //表示設定
                       labelString: '雨量(mm)',  //ラベル
                       fontSize: 12               //フォントサイズ
                    },
                    ticks: {
                       beginAtZero: true,
                       max: 250,
                       min: 0,
                       stepSize: 50,
                       fontSize: 12             //フォントサイズ
                    },
                 }
                ],
               xAxes: [{                         //x軸設定
                    display: true,                //表示設定
                    barPercentage: 1.0,           //棒グラフ幅
                    categoryPercentage: 0.4,      //棒グラフ幅
                    scaleLabel: {                 //軸ラベル設定
                       display: true,             //表示設定
                       labelString: '(月)',  //ラベル
                       fontSize: 12               //フォントサイズ
                    },
                    ticks: {
                        fontSize: 12             //フォントサイズ
                    },
                }],

		tooltips: {
					mode: 'point',
					intersect: true,
				},

              },
 
	   }, //options: END
  });
}
// 1)CSV読み込み
csvdata(drawBarLineChart,'bar-line-combo.csv');

//*** csvdata-read.js CSVデータ読み込み ***//

// 3) CSVから2次元配列に変換
function csv2Array(str) {
  var csvData = [];
  var cmt = /^\*/;          //行の先頭文字に*(半角)がある場合コメント行
  str = str.replace(/\r\n/g, '\n');     // 追加 CRを削除 
  str = str.replace(/\n+/g, '\n');      // 追加 空行を削除
  //str = str.replace(/\s+,|,\s+/g, ','); // 追加 不要な空白を削除
  var lines = str.split("\n");
  for (var i = 0; i < lines.length; ++i) { 
    var li = lines[i];
    var cells = lines[i].split(",");
	if(li.match(cmt)){       //コメント行判定
		continue;        //コメント行スキップ
   	}    
    csvData.push(cells);
  }
  return csvData;
}

//メイン関数csvdata
function csvdata(func,fl) {    // func:Chartクラス関数名 fl:CSVファイルのURL
  // 1) ajaxでCSVファイルをロード
  var req = new XMLHttpRequest();
  var filePath = fl;  // fl CSVファイル名(URL)
  req.open("GET", filePath, true);
  req.onload = function() {
    // 2) CSVデータ変換の呼び出し
    data = csv2Array(req.responseText);
    // 4) chart.js描画のChartクラス関数へリターンし、CSVデータを渡す
    func(data);     
  }
  req.send(null);
}

1月,5.2,52.3         
2月,5.7,56.1
3月,8.7,117.5
4月,13.9,124.5
5月,18.2,137.8
6月,21.4,167.7
7月,25.0,153.5
8月,26.4,168.2
9月,22.8,209.9
10月,17.5,197.8
11月,12.1,92.5
12月,7.6,51.0

 3.9. 円グラフでデータラベル、ラベルおよび割合%を円の外に表示

円グラフでデータラベル、ラベルおよび割合%を円の外に表示を試みましたが、データが多い場合、データラベルなどが正しく表示されません。
 ≫サンプルデモを見る

そこで、円グラフでデータラベル、ラベルおよび割合%を円の外に表示することが標準機能(デフォルト)である Highchartsで描いてみました。

≫できる!優れたデザイン性にレスポンシブなHighchartsで円グラフ、ドーナッツグラフを作る。 円グラフ、ドーナッツグラフで、データラベル、割合%、ラベルを円の外側にきれいに簡単に表示できる。 半円グラフ、半ドーナッツグラフでも、きれいに簡単に表示できる。

1. 使用ファイル2. 使い方3. サンプル

chart.js関連サイト内リンク




 最終更新日:2018.3.25, 2018.7.18
メール mailto:  掲示板