chartjsで積み上げ式バーチャート（棒グラフ）を作った。
データ構造が複雑になっているので、整理したものを残しておく。
目次
確認環境
- macOS 13.2
- docker desktop 4.16.2
- vue 3.2.45
- chartjs 2.9.4
- vue-chartjs 3.5.1
積み上げ式バーチャートの作り方
canvasタグに積み上げ式バーチャートを描画する
data, options をそれぞれ宣言して、new Chartに()に渡す
template
<div style="position: relative; width: 80vw; height: 50vh">
<canvas id="canvas" />
</div>script
import { onMounted } from "vue";
import { Chart } from "chart.js";
...
onMounted(() => {
const ctx = document.getElementById("canvas");
if (ctx)
new Chart(ctx, {
type: "bar",
data,
options,
plugins: {},
});
});data
datasetsに表示対象のデータ情報を指定
labelは凡例になり、data配列がlabelsと紐づく
barPercentageとcategoryPercentageを使って、棒の太さ調整ができる
categoryPercentageを1.1、barPercentageをコメントアウトにすると、棒が太くなり、隙間がなくなる
barPercentageを0.1、categoryPercentageをコメントアウトにすると、棒が細くなる
const data = {
datasets: [
{
label: "January 1月",
barPercentage: 0.9, // 棒グラフの太さ (太 > 細)
categoryPercentage: 0.4, // 棒グラフ同士の間隔 (狭 > 広)
backgroundColor: "#d3f8e2",
data: [46, 0, 43, 10, 70, 60, 19],
},
{
label: "February 2月",
barPercentage: 0.9,
categoryPercentage: 0.4,
backgroundColor: "#e4c1f9",
data: [18, 60, 13, 30, 30, 11, 69],
},
],
labels: [
"0分",
"10分",
"20分",
"30分",
"40分",
"50分",
"60分",
],
};options
const options = {
maintainAspectRatio: false,
legend: {
position: "bottom",
labels: {
boxWidth: 10,
},
},
layout: {
padding: {
top: 20,
},
},
tooltips: {
mode: "x",
intersect: false,
enabled: true,
caretSize: 0, // 矢印のサイズ
callbacks: {
label: (tooltipItem, data) => {
if (!tooltipItem.yLabel) return;
var label = data.datasets[tooltipItem.datasetIndex].label || "";
if (label) label += " : ";
label += Math.round(tooltipItem.yLabel);
label += "%";
return label;
},
},
},
scales: {
yAxes: [
{
stacked: true, // 積み上げグラフにする（yAxes, xAxes両方の指定が必要）
ticks: {
beginAtZero: true,
stepSize: 1,
maxTicksLimit: 6,
callback: (tick) => tick + "%",
},
},
],
xAxes: [
{
stacked: true, // 積み上げグラフにする（yAxes, xAxes両方の指定が必要）
gridLines: {
display: false,
},
},
],
},
};scalesについて
Y軸とX軸の表示設定ができる
stacked=trueにすることで、積み上げグラフになる
tooltipsについて
mode: “x” にすると、対象X軸のすべてのデータがまとめてツールチップ表示される
caretSizeを0にすると、矢印が非表示になる。初期値は「5」
Chart.Tooltip.positioners.[カスタム名]を指定することでツールチップの表示位置調整ができる
// TooltipをY軸の最下位を起点に表示する設定
Chart.Tooltip.positioners.bottom = (elements, eventPosition) => {
return {
x: eventPosition.x,
y: elements[0]._chart.chartArea.bottom,
};
};
...
const options = {
tooltips: {
position: "bottom", // 表示位置 ※ Chart.Tooltip.positioners.bottomを指定している
さいごに
チャートデータの数が多くなると、data構造が複雑になってしまうが、達成感のあるチャートにできて、実装しているのが楽しかった。
