「Chart.js」を「使用」するには、
「Chart.js」へのリンクを作成して、使用できるようにする必要がある。

その後、
「グラフ」を表示する為の「HTMLタグ」である「canvas」タグを、
描画したい場所に記述し、
「Javascript」を使用して、
「グラフ」の内容を「Javascriptコード」で記述して表示する。

「Chart.js」を「使用」する「手順」

「Chart.js」を「読み込む」ための「Javascriptコード」を「表示するHTMLコード」に記述する

「グラフ」などを表示したい場所に「HTMLコード」を記述する

「グラフ」などを表示するための「Javascriptコード」を記述する

Back

「折れ線グラフ」を表示する「サンプルコード」

「折れ線グラフ」を表示する「サンプルコード」

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
datasets: [{
label: 'Red',
data: [25, 20, 50, 20, 35, 25, 10],
borderColor: '#FF0000',
}, {
label: 'Yellow',
data: [30, 30, 30, 35, 20, 45, 35],
borderColor: '#F8FF00',
}, {
label: 'Green',
data: [40, 55, 20, 10, 40, 30, 25],
borderColor: '#00FF00',
}, {
label: 'Blue',
data: [10, 45, 40, 55, 5, 10, 40],
borderColor: '#005CFF',
}],
},
options: {
scales:{
y: {
min: 0,
max: 60,
},
},
},
});
</script>

Back

「Chart.js」で「描画」するのに必要な「要素」

「Chart.js」で、「グラフ」「チャート」を描画するには、

・type
・data
・options

の「3要素」を指定して「描画」を指定する。

type

「type」では、「グラフの種類」を指定する。
「type」で定めた値によって、表示される「チャート」「グラフ」の種類が決まる。

プロパティ名	説明
line	線グラフ
bar	棒グラフ
radar	レーダーチャート
pie	円グラフ
doughnut	ドーナツチャート
polarArea	鶏頭図(値によって半径が異なる円グラフ)
bubble	バブルチャート
scatter	散布図

data

「data」では、「グラフ」に表示する「ラベル」や「データ」などの「値」を設定する。
「data」には、さまざまな「プロパティ」を設定することが可能。

プロパティ名	説明
labels	グラフのX軸のラベルを設定する。
datasets	グラフの色やデータそのものの値(配列)を設定する。グラフを複数描画する場合はその分だけ配列の中にオブジェクトを設定する。
label	グラフのラベル(何のグラフであるかを示す)を設定する。
backgroundColor	線グラフなら点の部分、棒グラフなら棒の部分の色を設定する。
borderColor	線グラフなら線の部分、棒グラフなら棒の境界線の部分の色を設定する。

options

「options」は、「アニメーションの設定」「X軸」「Y軸」の設定など、
「グラフ」に関する「オプション設定」を変更することが可能。

プロパティ名	説明
animation	グラフ描画時のアニメーションを設定する duration アニメーションにかかる秒数(ミリ秒)を指定する easing 「アニメーション」の「種類」
scales	「軸」に関する値を設定する。 scaleLabel 「軸ラベル」について設定する。 ticks 「目盛り」について設定する。
x	「横の目盛り」の指定をするためのプロパティ。「scales」プロパティの中で指定する。
y	「縦の目盛り」の指定をするためのプロパティ。「scales」プロパティの中で指定する。
min	「目盛り」の「最小値」を指定する「プロパティ」。「scales」「y」プロパティの中で指定する。
max	「目盛り」の「最大値」を指定する「プロパティ」。「scales」「y」プロパティの中で指定する。
lineTension	「折れ線」に「曲線的要素」を加える「プロパティ」。「lineTension: 0.4」ぐらいが「自然な曲線」。・「0.4以上」は、「強い曲線」・「0.4以下」は、「弱い曲線」

Back

「Chart.js」で使用できる「グラフ」「チャート」の「書式」

「Chart.js」で使用できる「グラフ」「チャート」の「書式」を簡単にご紹介。

一般的な散布図の構文

const myChart = new Chart("myChart", {
type: "scatter",
data: {},
options: {}
});

一般的な折れ線グラフの構文

const myChart = new Chart("myChart", {
type: "line",
data: {},
options: {}
});

典型的な棒グラフの構文

const myChart = new Chart("myChart", {
type: "bar",
data: {},
options: {}
});

「棒グラフ」の「サンプルコード」

「水平バー」の「サンプルコード」

「棒グラフ」から「水平バー」に変更するには、
「type」を「bar」から「horizontalBar」に変更する。

var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var yValues = [55, 49, 44, 24, 15];
var barColors = ["red", "green","blue","orange","brown"];

new Chart("myChart", {
type: "horizontalBar",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {...}
});

「1つのバー」のみに「配色」する場合の書式
var barColors = ["blue"];

「すべてのバー」を「同一色」にする場合の書式
var barColors ="red";

「すべてのバー」を「異なる色」にする場合の書式
var barColors = [
"rgba(0,0,255,1.0)",
"rgba(0,0,255,0.8)",
"rgba(0,0,255,0.6)",
"rgba(0,0,255,0.4)",
"rgba(0,0,255,0.2)",
];

「円グラフ」の「サンプルコード」

new Chart("myChart", {
type: "pie",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {
title: {
display: true,
text: "World Wide Wine Production"
}
}
});

「ドーナツチャート」の「サンプルコード」

「円グラフ」から「ドーナツチャート」へ変更するには、
「type」を「pie（円グラフ）」から「doughnut（ドーナツ）」に変更するだけ。

new Chart("myChart", {
type: "doughnut",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {
title: {
display: true,
text: "World Wide Wine Production"
}
}
});

「散布図」の「サンプルコード」

「散布図」にするには、
「type: "scatter"」と指定する。

const xyValues = [
{x:50, y:7},
{x:60, y:8},
{x:70, y:8},
{x:80, y:9},
{x:90, y:9},
{x:100, y:9},
{x:110, y:10},
{x:120, y:11},
{x:130, y:14},
{x:140, y:14},
{x:150, y:15}
];

new Chart("myChart", {
type: "scatter",
data: {
datasets: [{
pointRadius: 4,
pointBackgroundColor: "rgba(0,0,255,1)",
data: xyValues
}]
},
options:{...}
});

「折れ線グラフ」の「サンプルコード」

Back