chore(client): improve chart rendering
This commit is contained in:
parent
2752858c7c
commit
6ebab5f577
|
@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue