Vue-chartjsで折れ線と積み上げ棒グラフを重ねて表示する
Vue3 + TypeScript + Vue-chartjs5 + ChartJS4 という組み合わせで折れ線と積み上げ棒グラフの組み合わせチャートをどのように設定するか紹介します。
背景
Vue-chartjsを使ってチャートを描画する場合、ChartJSのバージョンに合わせて設定方法を変更する必要があります。
個人的に作ったツールで設定方法を調べるのに手間取ったので、実装例を共有してみます。
設定のポイント
1. 折れ線と棒グラフを組み合わせる
折れ線と棒グラフを組み合わせる場合、チャートのコンポーネントはBarを使います。
そこに折れ線用のデータセットを追加します。
折れ線のデータセットはChartDataset.type属性に 'line' を指定します。
2. 複数のY軸を設定する
ChartOptions.scalesにY軸用のScaleOptionを2つ書きます。
ChartDatasetの中のyAxisID属性に対応する軸を指定します。
ScaleOption.position属性に 'right' の値を指定すると右に軸が表示されます。
3. 積み上げ棒グラフを設定する
棒グラフに使用するX軸用のScaleOptionとY軸用のScaleOptionの両方で、stacked属性に true を指定します。どちらか片方だけだと表示が崩れます。
4. 値を更新する場合はChartDataオブジェクトを置き換える
chart1DataのChartDataset内のdata配列だけを更新してもチャートは再描画されません。
ChartDataset自体を置き換えると自動的に再描画してくれます。
Vueコンポーネントの全コード
前掲のチャートを描画するコンポーネントのVueファイルです。
<template>
<div class="chartContainer">
<Bar :data="chart1Data" :options="char1tOptions" class="chart1"/>
{{ title }}
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, Ref } from "vue";
import * as ChartJS from 'chart.js';
import { Bar } from 'vue-chartjs';
const title = ref('Chart1');
// TSV形式のデータ
const tsvValue = `
2024/1/1 15907760 0 7448000 1663360 1920400 4876000
2024/2/1 16674640 0 8200000 1688640 1910000 4876000
2024/3/1 15534240 0 7068000 1727040 1863200 4876000
2024/4/1 16888000 0 8024000 2036800 1951200 4876000
2024/5/1 16495200 0 7480000 2060800 2078400 4876000
2024/6/1 17942240 0 8652000 2107040 2307200 4876000
2024/7/1 19256640 0 10064000 2061440 2255200 4876000
2024/8/1 18532320 0 9528000 2064320 2064000 4876000
2024/9/1 17693440 0 8764000 2137440 1916000 4876000
2024/10/1 17037120 0 7824000 2355520 1981600 4876000
2024/11/1 17796560 0 8556000 2239360 2125200 4876000
2024/12/1 18022000 0 9324000 2041600 1780400 4876000
`;
// チャートデータ
const chart1Data: Ref<ChartJS.ChartData> = ref({
labels: [] as string[],
datasets: [] as ChartJS.ChartDataset[]
});
// チャートオプション
const char1tOptions: Ref<ChartJS.ChartOptions> = ref({
// コンテナリサイズ時に再描画するかどうかのフラグ。固定サイズの場合は軽量化のためにfalseにするものらしい。
responsive: false,
// ベース文字色（凡例など）
color: '#333',
scales: {
xAxis0:
{
// 積み上げ棒グラフを同じX軸に表示するための設定。falseにすると別のX軸に表示される。
// ★ポイント3
stacked: true
},
yAxis0: {
// 積み上げ棒グラフを同じY軸に表示するための設定。falseにすると先頭の値（投信）だけが表示される。
// ★ポイント3
stacked: true
},
// ★ポイント2
yAxis1: {
// 右に表示する設定。非表示にする場合はdisplay: falseを指定する。
position: 'right',
grid: {
// グリッド線を非表示にする。
display: true
},
// Y軸の最小値を0にしないための設定。trueにすると0からの軸が表示される。
beginAtZero: false
}
}
});
// マウント時に1度だけ実行
onMounted(() => {
buildChartData();
});
// TSV形式のデータをチャート用のデータに変換
const buildChartData = () => {
const lines = tsvValue.trim().split('\n');
const labels = [] as string[];
const datasets: ChartJS.ChartDataset[] = [
{
label: '相対',
type: 'line', // ★ポイント1
data: [] as number[],
backgroundColor: '#f33',
borderColor: '#c33',
fill: false,
xAxisID: 'xAxis0',
yAxisID: 'yAxis1',
},
{
label: '株式',
data: [] as number[],
backgroundColor: '#c9e',
xAxisID: 'xAxis0',
yAxisID: 'yAxis0',
},
{
label: '投資信託',
data: [] as number[],
backgroundColor: '#9ce',
xAxisID: 'xAxis0',
yAxisID: 'yAxis0',
},
{
label: '金現物',
data: [] as number[],
backgroundColor: '#ce9',
xAxisID: 'xAxis0',
yAxisID: 'yAxis0',
},
{
label: 'プラチナ現物',
data: [] as number[],
backgroundColor: '#9eb',
xAxisID: 'xAxis0',
yAxisID: 'yAxis0',
},
{
label: '現金',
data: [] as number[],
backgroundColor: '#eb9',
xAxisID: 'xAxis0',
yAxisID: 'yAxis0',
}
];
for (let i = 1; i < lines.length; i++) {
const items = lines[i].split('\t');
labels.push(items[0]);
for (let j = 0; j < 6; j++) {
datasets[j].data.push(parseFloat(items[j + 1]));
}
}
// ★ポイント4
chart1Data.value = {
labels,
datasets
};
};
</script>
<style scoped>
.chart1 {
height: 400px;
width: 800px;
border: 1px solid #ccc;
margin: 1rem;
padding: 1rem;
}
.chartContainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
確認したバージョン
- vue: 3.5.13
- vue-chartjs: 5.3.2
- chart.js: 4.4.7
- @types/chartjs: 0.0.31