今回、折れ線と積み上げ棒グラフの複合chart.jsを使用して作成しました
最後にグラフグラフ内に数値を入れようとしたところどうにかグラフすべての数値を入れることが出来たのですが、
積み上げ棒グラフにあたる
barA barB barC( yAxisID: 'y-axis-2',で区切っているもの)
のみ数値を表示する表示したいのですがうまくいきませんでした
どなたか方法をご教示方法をご教示いただけますと幸いです。
以下が実際に作成したものになります(barA barB barC lineA lineBの数値が表示されたもの)
<!DOCTYPE html> <html lang=“ja”> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <title>HTML Sample</title> </head> <body> <canvas id="myChart" width="800" height="200"></canvas><script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: "bar", data:{ labels:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], datasets:[ { label:'lineA', type:'line', data:[3,3,3,3,3,3,3,3,3,3,3,3], backgroundColor: "red", borderColor : "rgba(254,97,132,0.8)", fill: false, borderDash: [5, 5],
yAxisID: 'y-axis-1',
},
{
label:'lineB',
type:'line',
data:[0,3,4,4,3,3,3],
backgroundColor: "black",
borderColor : "rgba(0,0,0,255.8)",
fill: false,
yAxisID: 'y-axis-1',
}, { label:'barA', data:[0,3,4,4,4,4,4,4,4,4,], backgroundColor: "#00ff7f", yAxisID: 'y-axis-2', }, { label:'barB', data:[6,3,2,3,0,0,0,0,3,2], backgroundColor: "gray", yAxisID: 'y-axis-2', }, { label:'barC', data:[0,0,0,-1,-1,-1,-1,-1,-1,-1,], backgroundColor: "blue", yAxisID: 'y-axis-2', }, ] }, options:{ title: { //タイトル設定 display: true, //表示設定 fontSize: 18, //フォントサイズ text: '月別の数値', //ラベル// responsive: true,
},
legend: {
display: true,
position: 'top',
label:'test', },
scales:{ xAxes:[{stacked:true,}, ], yAxes:[{id: 'y-axis-1', stacked: false,//積み上げないY軸 type: 'linear', display: true, position: 'left', scaleLabel: { //軸ラベル設定 display: false, //表示設定 labelString: '【口座】', //ラベル fontSize: 12, //フォントサイズ //fontColor:'blue', }, ticks: {beginAtZero: true, max:8, min:-1, stepSize: 1, } },{ id: 'y-axis-2',//積み上げるY軸 stacked: true, type: 'linear', display:true, position: 'right', ticks: { beginAtZero: true, max:8, min:-1, stepSize: 1,},},
] },
},
});
//ラベル // Define a plugin to provide data labels
Chart.plugins.register({
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 meta = chart.getDatasetMeta(i); if (!meta.hidden) { meta.data.forEach(function (element, index) { // ステップ1 数値を文字列に変換 // Draw the text in black, with the specified font ctx.fillStyle = 'rgb(0, 0, 0)'; var fontSize =12; var fontStyle = 'normal'; // 書体 "bold", "italic" var fontFamily = 'seif'; // フォントの種類 "sans-serif", "MS 明朝" ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); // ステップ3 文字列の位置の基準点 // Just naively convert to string for now var dataString = dataset.data[index].toString(); // Make sure alignment settings are correct ctx.textAlign = 'center'; // 文字列 start, end, left, right, center ctx.textBaseline = 'middle'; // 文字高 middle, top, bottom
// ステップ4 文字列のグラフでの位置
var padding = 5; // 点と文字列の距離
var position = element.tooltipPosition(); //文字列の表示 fillText(文字列, X位置, Y位置)
ctx.fillText(dataString, position.x, position.y - (fontSize / 4) - padding);
});
}
});
}
});
</script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/20 08:14