🎨
This commit is contained in:
parent
78ee06985e
commit
6083356a3e
3 changed files with 15 additions and 5 deletions
|
@ -103,8 +103,12 @@ const chartSrc = $ref('active-users');
|
|||
let subDoughnutEl = $ref<HTMLCanvasElement>();
|
||||
let pubDoughnutEl = $ref<HTMLCanvasElement>();
|
||||
|
||||
const { handler: externalTooltipHandler1 } = useChartTooltip();
|
||||
const { handler: externalTooltipHandler2 } = useChartTooltip();
|
||||
const { handler: externalTooltipHandler1 } = useChartTooltip({
|
||||
position: 'middle',
|
||||
});
|
||||
const { handler: externalTooltipHandler2 } = useChartTooltip({
|
||||
position: 'middle',
|
||||
});
|
||||
|
||||
function createDoughnut(chartEl, tooltip, data) {
|
||||
const chartInstance = new Chart(chartEl, {
|
||||
|
|
|
@ -53,7 +53,9 @@ const chartEl = ref<HTMLCanvasElement>(null);
|
|||
// フォントカラー
|
||||
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
|
||||
|
||||
const { handler: externalTooltipHandler } = useChartTooltip();
|
||||
const { handler: externalTooltipHandler } = useChartTooltip({
|
||||
position: 'middle',
|
||||
});
|
||||
|
||||
let chartInstance: Chart;
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@ import { onUnmounted, ref } from 'vue';
|
|||
import * as os from '@/os';
|
||||
import MkChartTooltip from '@/components/MkChartTooltip.vue';
|
||||
|
||||
export function useChartTooltip() {
|
||||
export function useChartTooltip(opts: { position: 'top' | 'middle' } = { position: 'top' }) {
|
||||
const tooltipShowing = ref(false);
|
||||
const tooltipX = ref(0);
|
||||
const tooltipY = ref(0);
|
||||
|
@ -41,7 +41,11 @@ export function useChartTooltip() {
|
|||
|
||||
tooltipShowing.value = true;
|
||||
tooltipX.value = rect.left + window.pageXOffset + context.tooltip.caretX;
|
||||
tooltipY.value = rect.top + window.pageYOffset;
|
||||
if (opts.position === 'top') {
|
||||
tooltipY.value = rect.top + window.pageYOffset;
|
||||
} else if (opts.position === 'middle') {
|
||||
tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
Loading…
Reference in a new issue