worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

chore(client): improve chart rendering

Browse source
This commit is contained in:
syuilo 2022-01-28 11:19:18 +09:00
parent 2752858c7c
commit 6ebab5f577
1 changed files with 22 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/client/src/components/chart.vue
View file

@ -143,6 +143,7 @@ export default defineComponent({
} }
const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
// フォントカラー // フォントカラー
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
@ -255,6 +256,27 @@ export default defineComponent({
}, },
}, },
}, },
plugins: [{
id: 'vLine',
beforeDraw(chart, args, options) {
if (chart.tooltip._active && chart.tooltip._active.length) {
const activePoint = chart.tooltip._active[0];
const ctx = chart.ctx;
const x = activePoint.element.x;
const topY = chart.scales.y.top;
const bottomY = chart.scales.y.bottom;
ctx.save();
ctx.beginPath();
ctx.moveTo(x, bottomY);
ctx.lineTo(x, topY);
ctx.lineWidth = 1;
ctx.strokeStyle = vLineColor;
ctx.stroke();
ctx.restore();
}
}
}]
}); });
}; };