データラベルも表示できる。円グラフに割合％、ラベルを円の中や外に表示できる。
ガラケーやスマホでも見ることができる。
最近、グラフを作るのは、CGI系のフラッシュグラフとは異なり、HTMLへの組み込みが簡単なJavascriptライブラリーが主流になっています。
主なJavascriptライブラリーには、
Chart.js、
Taucharts、
C3.js、
Google Charts、
ccchart(canvasChart)、
amCharts（有料）や
Highcharts（有料）などがあります。
その中で、Chart.js（フリー） はシンプルでデザイン性が高くレスポンシブなチャート/グラフを作成可能なJavaScriptライブラリと言われています。
Chart.js の最新バージョンを、GitHub のリリースからダウンロードするか、
Chart.js CDN を使用します。
なお、Chart.js には別バージョンとしてデータラベルプラグイン版(chartjs-plugin-datalabels)が
がありますが、このページでは扱いません。
このページで扱うデータラベルなどのプラグインは、基本のChart.jsバージョンが規定する機能です。
また、グラフのデータをCSVファイルから読み込む場合は、csvdata.jsを使用します。
CSVデータ読み込みに関しては、Qiitaサイトを参考にさせていただきました。
使用ファイル使い方はつぎのとおりです。 HTMLの作り方は、つぎのいずれかの構成になるでしょう。
|
|
|
|
| プラグイン名 | 機 能 | 適用グラフ |
| DataLabelPluginB | データラベル表示（文字色黒）、1000単位カンマ区切り対応 | 棒、折れ線、円グラフ |
| DataLabelPluginW | データラベル表示（文字色白）、1000単位カンマ区切り対応 | 棒、折れ線、円グラフ |
| LabelPlugin | ラベル（項目名）表示 | 円グラフ |
| PercentagePlugin | パーセンテージ（割合％）表示 | 円グラフ |
≫このグラフのデモを見る
var myBarChart = new Chart(ctx, { // Chartクラス
type: 'bar',
data: {
・・・
},
option: {
responsive: true, //*レスポンシブ
maintainAspectRatio: false, //*レスポンシブ trueまたはfalse
・・・
} // 詳細は下ソースコード参照
]);
function drawBarChart(data) {
//CSV列データを列ごとに配列にします。 3列の例＝項目名,data1,data2
var tmpLabels = [], tmpData1 = [], tmpData2 = [];
for (var row in data) {
tmpLabels.push(data[row][0]) //軸項目名（１列目）
tmpData1.push(data[row][1]) //データ１（２列目）"東京"
tmpData2.push(data[row][2]) //データ２（３列目）"札幌"
};
var ctx = document.getElementById("myChart");
var myBarChart = new Chart(ctx, { // Chartクラス
type: 'bar',
data: {
labels: tmpLabels,
datasets: [
{ label: "東京", data: tmpData1, backgroundColor: "red" },
{ label: "札幌", data: tmpData2, backgroundColor: "blue" }
],
option: {
・・・
} // 詳細は下ソースコード参照
]);
}
// CSV読み込みcsvdata関数（csvdata-read.js）を起動。上の関数名drawBarChartとCSVファイルURLを指定。
csvdata(drawBarChart,"bar-data.csv");
使い方サンプルソースコード
<!-- (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>
<:script>
var chartData = {
・・・
}
var chartOption = {
・・・
}
var ctx = document.getElementById("myChart");
// Chart.jsのグラフ描画の記述 Chartクラス
var myChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: chartOption
});
</script>
このページでは、基本的なグラフの棒グラフ、線グラフおよび円グラフの使い方について説明しています。
３つの基本グラフのデータラベルの表示方法や円グラフのパーセンテージ（％）、ラベル（項目名）の表示方法および
グラフデータをCSVファイルから読み込む方法について説明します。
| 項番 | サンプル | chart type | 備 考 |
| 3.1 | 縦棒グラフ、横棒グラフ | bar, horizontalBar | データはCSVファイル |
| 3.2 | 縦棒グラフ - データラベル - datalabels | bar | 数値、1000単位カンマ区切り |
| 3.3 | 折れ線グラフ | line | データはCSVファイル |
| 3.4 | 折れ線グラフ - データラベル - datalabels | line | |
| 3.5 | 円グラフ | pie | データはCSVファイル |
| 3.6 | 円（ドーナッツ）グラフ - データラベル、ラベル - datalabels, labels | doughnut | |
| 3.7 | 円グラフ - パーセンテージ（割合％） - percentage | pie | |
| 3.8 | 混合グラフ（縦棒 + 折れ線グラフ）- Combo bar/line | bar, line | データはCSVファイル |
| 3.9 | 円グラフでデータラベル、ラベルおよび割合％を円の外に表示 | pie, doughnut |
<!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データは３列=項目名,data1,data2
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("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データは３列=項目名,data1,data2
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("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から２次元配列に変換
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);
}
*** １列目：項目名、２列目：東京年間平均気温、３列目：札幌年間平均気温 コメント行挿入可 ***
１月,5.2 ,-3.6
２月,5.7 ,-3.1
３月,8.7 ,0.6
４月,13.9,7.1
５月,18.2,12.4
６月,21.4,16.7
７月,25.0,20.5
８月,26.4,22.3
９月,22.8,18.1
１０月,17.5,11.8
１１月,12.1,4.9
１２月,7.6,-0.9
<script>
//グラフ描画関数drawBarChart
function drawBarChart(data) { // ２．CSVデータ読み込み関数csvdataより、CSVデータの２次元配列dataがリターン
// ３．chart.jsのdataset用の配列を用意し、CSVデータの２次元配列dataの列を配列に変換します。
// このCSVデータは３列＝項目名,データ1（東京）,データ2（札幌）。
var tmpLabels = [], tmpData1 = [], tmpData2 = []; //CSVデータが３列の配列定義
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 ) ; //最後のカンマ(,)を削除
// ４．chart.jsでグラフ描画
var ctx = document.getElementById("myBarChart").getContext("2d");
var myBarChart = new Chart(ctx, { // Chartクラス
type: 'bar',
data: {
labels: tmpLabels,
datasets: [
{ label: "東京", data: tmpData1, backgroundColor: "red" },
{ label: "札幌", data: tmpData2, backgroundColor: "blue" }
]
}, //data 終り
・・・
・・・
}); //Chartクラス終り
} //グラフ描画関数drawBarChart終り
csvdata(グラフ描写関数名drawBarChart,"CSVファイルURL"); // 1. CSVデータ読み込み関数起動
</script>
ここの縦棒グラフのサンプルでは、データラベルの表示、数値の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>
//*** （１）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);
});
}});
}};
callback: function(label, index, labels) { // 1000単位カンマ区切り
return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); // +' 件 ';
}
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, ',')+" 票";
}
}
}
var myBarChart = new Chart(ctx, { // Chartクラス
type: 'bar',
data: {
・・・
},
option: {
・・・
} // 詳細は上ソースコード参照
plugins:[DataLabelPluginB], //データラベルプラグイン起動
]);
| プラグイン名 | 機 能 | 備 考 |
| DataLabelPluginB | データラベル表示（文字色黒） | 棒、折れ線、円グラフ |
| DataLabelPluginW | データラベル表示（文字色白） | 棒、折れ線、円グラフ |
| LabelPlugin | ラベル（項目名）表示 | 円グラフ |
| PercentagePlugin | パーセンテージ（割合％）表示 | 円グラフ |
この折れ線グラフは、グラフ描写のJavascriptをjsファイルで作成しています。こうすることにより、HTMLがスッキリします。
また、下サンプルの赤線（スマホ）のように、データの無い場合（欠損値）のデータの書き方について、CSVデータの例を「CSVデータ」欄に示します。
<!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)",
//結合点のスタイル 省略時は○（丸）。
// 1.circle（円）：〇 2.cross（プラス印）：＋ 3.crossRot（X点印）：X 4.dash（紐）：－ 5.line（線）：―
// 6.rect（四角形）：□ 7.rectRounded（角丸）：□ 8.rectRot（ひし形）:◇ 9.star（星）：＊ 10.triangle（三角形）：△
pointStyle: "circle",
//結合点の背景色
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から２次元配列に変換
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,NaN
2007,90.7,95.0,NaN
2008,90.9,95.6,NaN
2009,91.2,96.3,NaN
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
（注）データのない場合は、NaN（Not a Number）を指定する
下サンプルのように、データの無い場合（欠損値）の一般的な記述方法はつぎのとおりです。
//データの設定
data: {
// 3 データ項目のラベル
labels: ["2006","2007","2008","2009","2010","2011","2012","2013","2014","2015"],
//データセット
datasets: [
{
//グラフのデータ データのない場合（欠損値）は、NaN（Not a Number） を指定する
data:[NaN,NaN,NaN,NaN,9.7,29.3,49.5,62.6,64.2,72.0]
}
]
},
<!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,
//グラフのデータ データのない場合は、NaN を指定する
data:[NaN,NaN,NaN,NaN,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>
//*** （１）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);
});
}});
}};
<!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から２次元配列に変換
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
<!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:["Ｔ","Ma","Ｎ","Ｈ","Ｓ","Ｆ","Ｄ","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:"自動車主要８社２０１６年国内生産実績（千台）データラベル（項目の値）"},
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:["Ｔ","Ma","Ｎ","Ｈ","Ｓ","Ｆ","Ｄ","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:"自動車主要８社２０１６年国内生産実績（千台）ラベル（項目名）"
},
responsive: true, //*レスポンシブ
maintainAspectRatio: false, //*レスポンシブ trueまたはfalse
},
plugins:[LabelPlugin], //ラベルプラグイン起動
});
</script>
</body>
</html>
//*** （２）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);
});
}});
}};
//*** （３）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);
});
}});
}};
<!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>
//*** （４）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);
});
}
});
}
};
<!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から２次元配列に変換
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);
}
１月,5.2,52.3
２月,5.7,56.1
３月,8.7,117.5
４月,13.9,124.5
５月,18.2,137.8
６月,21.4,167.7
７月,25.0,153.5
８月,26.4,168.2
９月,22.8,209.9
１０月,17.5,197.8
１１月,12.1,92.5
１２月,7.6,51.0
chart.js関連サイト内リンク
最終更新日：2018.3.25, 2023. 8.11 |
|
|
|