データが持つ意味を正しく効率的に伝えるために、適切な形式で視覚的にわかりやすく提示します。表組を使ってデータの値そのものを見せるのがよい場合もありますので、個々のケースで最適な見せ方を判断します。
ここではプラグインChart.jsを利用したグラフチャートの例を紹介します。詳細についてはChart.jsのドキュメントを参照してください。
棒グラフ
縦軸に量、横軸に時間や変化する要素をとり、項目ごとの連続した集計値の大きさを比較するのに適しています。
<canvas id="chart-bar" style="height: 320px; width: 480px;"></canvas>
// データセット
var barData = {
labels : ["4月","5月","6月","7月"],
datasets: [
{
label: '1st dataset',
backgroundColor: '#92dbb3',
data: [65, 59, 80, 81],
},
{
label: '2nd dataset',
backgroundColor: '#2dc3cf',
data: [100, 10, 23, 54],
},
{
label: '3rd dataset',
backgroundColor: '#0c82b1',
data: [11, 84, 62, 99],
},
{
label: '4th dataset',
backgroundColor: '#22507e',
data: [31, 42, 56, 67],
},
],
};
// グラフのオプション指定
var ctx1 = document.getElementById("chart-bar").getContext("2d");
var myBarChart = new Chart(ctx1,{
type: 'bar',
data: barData,
options: {
legend: {
position: 'bottom',
},
}
});
折れ線グラフ
縦軸に量やパーセンテージなど変化を表す数値、横軸に時系列をとり、時間の経過に伴う変化の傾向を表現するのに適しています。
<canvas id="chart-line" style="height: 320px; width: 480px;"></canvas>
// データセット
var lineData = {
labels : ["4月","5月","6月","7月"],
datasets: [
{
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(254,180,130,0.1)",
borderColor: "rgba(254,180,130,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(254,180,130,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 2,
pointHoverBackgroundColor: "rgba(254,180,130,1)",
pointHoverBorderColor: "rgba(254,180,130,1)",
pointHoverBorderWidth: 0.5,
pointRadius: 2,
pointHitRadius: 10,
data: [65, 59, 80, 81],
spanGaps: false,
},
{
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(226,73,94,0.1)",
borderColor: "rgba(226,73,94,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(226,73,94,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 2,
pointHoverBackgroundColor: "rgba(226,73,94,1)",
pointHoverBorderColor: "rgba(226,73,94,1)",
pointHoverBorderWidth: 0.5,
pointRadius: 2,
pointHitRadius: 10,
data: [5, 9, 90, 31],
spanGaps: false,
},
{
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(128,47,55,0.1)",
borderColor: "rgba(128,47,55,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(128,47,55,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 2,
pointHoverBackgroundColor: "rgba(128,47,55,1)",
pointHoverBorderColor: "rgba(128,47,55,1)",
pointHoverBorderWidth: 0.5,
pointRadius: 2,
pointHitRadius: 10,
data: [30, 90, 20, 11],
spanGaps: false,
},
],
};
// グラフのオプション指定
var ctx2 = document.getElementById("chart-line").getContext("2d");
var myLineChart = new Chart(ctx2,{
type: 'line',
data: lineData,
options: {
legend: {
position: 'bottom',
},
}
});
円グラフ
項目ごとの全体に対する構成比を表現するのに適しています。割合を示すものですので、量の比較や推移の表現には向きません。
<canvas id="chart-doughnut" style="height: 320px; width: 480px;"></canvas>
// データセット
var DoughnutData = {
labels: ["A","B","C","D","E"],
datasets: [
{
data: [300, 500, 1000, 2000, 400],
backgroundColor: ["#fdc2a8","#e7789a","#b73893","#863291","#4e3087"],
}
],
};
// グラフのオプション
var ctx4 = document.getElementById("chart-doughnut").getContext("2d");
var myDoughnutChart = new Chart(ctx4,{
type: 'doughnut',
data: DoughnutData,
options:
{
cutoutPercentage: 50, // ドーナツ型の中心のくりぬきの大きさ。0にするとくりぬきなしのパイ型に。
legend: {
position: 'right',
}
}
});
レーダー
複数の項目の大きさを一見して比較する場合に適しています。各項目のバランスも見ることができます。成績評価や身体測定など各項目を属性として持つ主体の性能などを比較する場合によく用いられます。
<canvas id="chart-radar" style="height: 320px; width: 480px;"></canvas>
// データセット
var radarData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
// グラフのオプション
var ctx6 = document.getElementById("chart-radar").getContext("2d");
var myRadarChart = new Chart(ctx6, {
type: 'radar',
data: radarData,
options: {
legend: {
position: 'bottom',
},
scale: {
pointLabels: {
fontSize: 14,
fontColor: '#8ea0a9',
},
},
}
});
バブル
データの相関関係を散布状況で示すのに加え、量も表現できます。
<canvas id="chart-bubble" style="height: 320px; width: 480px;"></canvas>
// データセット
var bubbleData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
// グラフのオプション
var ctx7 = document.getElementById("chart-bubble").getContext("2d");
var myBubbleChart = new Chart(ctx7, {
type: 'bubble',
data: bubbleData,
options: {
legend: {
position: 'bottom',
},
}
});
棒・折れ線複合グラフ
<canvas id="chart-barLine" style="height: 320px; width: 480px;"></canvas>
// データセット
var barChartData = {
labels: ['8/26','8/27','8/28','8/29','8/30','8/31','9/1','9/2','9/3','9/4','9/5','9/6'
],
datasets: [
{
type: 'line', // 表示するチャートを選択
label: 'sample-line',
data: ['40','55','45','63','48','77','40','45','55','60','58','97'
],
borderColor : "rgb(254, 184, 129)",
borderWidth: 2,
hoverBackgroundColor: "rgba(254, 184, 129, 0.8)",
pointBackgroundColor : "rgba(254, 184, 129, 0.8)",
fill: false,
yAxisID: "y-axis-1",// 追加
},
{
type: 'bar', // 表示するチャートを選択
label: 'sample-bar',
data: ['0.82','0.43','0.35','0.61','0.56','0.72','0.63','0.41','0.32','0.56','1.0','1.32'
],
borderColor : "rgb(226, 73, 94)",
borderWidth: 0,
hoverBackgroundColor: "rgba(226, 73, 94, 0.8)",
backgroundColor : "rgba(226, 73, 94, 0.8)",
yAxisID: "y-axis-2",
},
],
};
// グラフのオプション
var complexChartOption = {
responsive: true,
scales: {
yAxes: [{
id: "y-axis-1",
type: "linear",
position: "left",
ticks: {
max: 100,
min: 0,
stepSize: 20
},
}, {
id: "y-axis-2",
type: "linear",
position: "right",
ticks: {
max: 1.5,
min: 0,
stepSize: .5
},
gridLines: {
drawOnChartArea: false,
},
}],
},
legend: {
position: 'bottom',
}
};
var ctx99 = document.getElementById("chart-barLine").getContext("2d");
window.myLine = new Chart(ctx99, {
type: 'bar',
data: barChartData,
options: complexChartOption,
});
load_barLine_fl = 1;