データラベルも表示できる。ポイントグラフは線がない折れ線グラフ？
ポイントグラフは、データ系列の時間的な変化（散布・収束）を表示、または複数の項目を比較します。
項目の種類を水平方向に配置し、データ値を垂直方向にプロットすることで、時間的な変化を強調します。(Infragistics.comより)
Chart.js（フリー） は、ポイントグラフを線グラフ（line chart）の一部（Point styles）として位置付けています。
Chart.js の最新バージョンを、GitHub のリリースからダウンロードするか、
Chart.js CDN を使用します。
なお、Chart.js には別バージョンとしてデータラベルプラグイン版(chartjs-plugin-datalabels)が
がありますが、このページでは扱いません。
このページで扱うデータラベルなどのプラグインは、基本のChart.jsバージョンが規定する機能です。
使用ファイル使い方はつぎのとおりです。
| プラグイン名 | 機 能 | 適用グラフ |
| DataLabelPluginB | データラベル表示（文字色黒）。データポイントの上に表示。 | 棒、折れ線、円グラフ |
| DataLabelPluginW | データラベル表示（文字色白）。データポイントの上に表示。 | 棒、折れ線、円グラフ |
| LabelPlugin | ラベル（項目名）表示 | 円グラフ |
| PercentagePlugin | パーセンテージ（割合％）表示 | 円グラフ |
| DataLabelPluginP | データラベル表示（文字色黒）。データポイントの右横に表示。 | ポイントグラフ |
var myBarChart = new Chart(ctx, { // Chartクラス
type: 'line',
data: {
labels: [・・・], // ラベル
//データセット
datasets: [
{
data: [・・・], //データ１
showLine: false //線を表示しない
}
},
option: {
responsive: true, //*レスポンシブ
maintainAspectRatio: false, //*レスポンシブ trueまたはfalse
・・・
},
plugins:[DataLabelPluginP] //データラベルプラグイン起動
]);
サンプルグラフは、コンビニ3社のコンビ二・店舗別100円コーヒー濃度を比較したポイントグラフです。 なお、データの値はポイントデータが重ならないように実際のデータを加工変更しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- レスポンシブ対応 全デバイス -->
<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.2/Chart.bundle.min.js"></script>
<!-- データラベルプラグイン Chart.js -->
<script src="js/labeling-plugin.js"></script>
<title>ポイントグラフ サンプル Chart.js</title>
<style>
/* レスポンシブ スマホ用の例 */
@media only screen and (max-width: 480px) {
#bodyID { margin-left: 0; }
/* コンテナ */
#main-table { margin: 0 auto; text-align: center; }
#containerID { width: 96%; margin: 10px auto; }
}
</style>
</head>
<body id="bodyID">
<div id="containerID" class="chart-container" style="position: relative; width:50vw; height:50vh">
<canvas id="myPointChart"></canvas>
</div>
<script>
// 4)chart.jsで描画
var ctxline = document.getElementById("myPointChart"); // .getContext("2d");
var myLineChart = new Chart(ctxline, {
//グラフの種類
type: 'line',
//データの設定
data: {
// 3 データ項目のラベル
labels: ["S - コンビニ", "F - コンビニ", "L - コンビニ"],
//データセット
datasets: [
{
//凡例
label: "店舗A",
//面の表示
fill: false,
//線のカーブ
lineTension: 0,
//背景色
backgroundColor: "rgba(255,215,0,0.2)", //255,215,0
//枠線の色
borderColor: "rgba(255,215,0,1)",
//結合点の枠線の色
pointBorderColor: "rgba(255,215,0,1)",
//結合点の背景色
pointBackgroundColor: "rgba(255,215,0,1)",
//結合点のサイズ
pointRadius: 5,
//結合点のサイズ（ホバーしたとき）
pointHoverRadius: 8,
//結合点の背景色（ホバーしたとき）
pointHoverBackgroundColor: "rgba(255,215,0,1)",
//結合点の枠線の色（ホバーしたとき）
pointHoverBorderColor: "rgba(220,220,220,1)",
//結合点より外でマウスホバーを認識する範囲（ピクセル単位）
pointHitRadius: 15,
//グラフのデータ
data: [1.21,0.91,1.27],
showLine: false // no line shown
},
{
//凡例
label: "店舗B",
//面の表示
fill: false,
//線のカーブ
lineTension: 0,
//背景色
backgroundColor: "rgba(75,192,192,0.4)",
//枠線の色
borderColor: "rgba(75,192,192,1)",
//結合点の枠線の色
pointBorderColor: "rgba(75,192,192,1)",
//結合点の背景色
pointBackgroundColor: "rgba(75,192,192,1)",
//結合点のサイズ
pointRadius: 5,
//結合点のサイズ（ホバーしたとき）
pointHoverRadius: 8,
//結合点の背景色（ホバーしたとき）
pointHoverBackgroundColor: "rgba(75,192,192,1)",
//結合点の枠線の色（ホバーしたとき）
pointHoverBorderColor: "rgba(220,220,220,1)",
//結合点より外でマウスホバーを認識する範囲（ピクセル単位）
pointHitRadius: 10,
//グラフのデータ
data: [1.43,1.1,1.08],
showLine: false // no line shown
},
{
//凡例
label: "店舗C",
//面の表示
fill: false,
//線のカーブ
lineTension: 0,
//背景色
backgroundColor: "rgba(255,102,255,0.4)",
//枠線の色
borderColor: "rgba(255,0,0,1)",
//結合点の枠線の色
pointBorderColor: "rgba(255,102,255,1)",
//結合点の背景色
pointBackgroundColor: "rgba(255,102,255,1)",
//結合点のサイズ
pointRadius: 5,
//結合点のサイズ（ホバーしたとき）
pointHoverRadius: 8,
//結合点の背景色（ホバーしたとき）
pointHoverBackgroundColor: "rgba(255,0,0,1)",
//結合点の枠線の色（ホバーしたとき）
pointHoverBorderColor: "rgba(220,220,220,1)",
//結合点より外でマウスホバーを認識する範囲（ピクセル単位）
pointHitRadius: 10,
//グラフのデータ
data: [1.00,0.86,1.19],
showLine: false // no line shown
}
]
},
options: {
responsive: true, //*レスポンシブ
maintainAspectRatio: false, //*レスポンシブ trueまたはfalse
title: {
display: true,
text: 'コンビ二・店舗別100円コーヒー濃度（TDS, %)'
},
elements: {
point: {
pointStyle: 'circle'
}
},
scales: {
yAxes: [{ //縦（Y）軸
scaleLabel: { //Y軸タイトル設定
display: true, //表示設定
//labelString: '(%)', //縦（Y）軸タイトル
fontSize: 12 //フォントサイズ
},
ticks: {
beginAtZero:true, //Y軸目盛は0から
max: 1.8, //目盛の最大値
min: 0.0, //目盛の最小値
stepSize: 0.1, //目盛の間隔値
fontSize: 11, //目盛ラベルのフォントサイズ
fontColor: "blue",
callback : function(value, index, values){
return value + " (%) ";
}
}
}],
xAxes: [{ //横（X）軸
scaleLabel: { //X軸タイトル設定
display: true, //表示設定
labelString: 'コンビニ３社', //横（X）軸タイトル
fontSize: 11 //フォントサイズ
},
ticks: {
fontSize: 8
}
}]
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
}
}, //option
plugins:[DataLabelPluginP] //データラベルプラグイン起動
});
</script>
</body>
</html>
//*** （５）Define a plugin to provide data labels データラベルプラグイン Point chart 右側表示 文字色：黒 基本chart.js ***//
var DataLabelPluginP = {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=11;
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); //ポイントの上に表示
ctx.fillText(dataString,position.x+(fontSize)+padding,position.y); //ポイントの右横に表示
});
}});
}};
chart.js関連サイト内リンク
最終更新日：2018.8.30（Debut) , 2023. 8.11 |
|
|
|