From 3d0fde5eee22b42aa934a45fda426dac6d0a1dbc Mon Sep 17 00:00:00 2001 From: SunCheng Date: Sat, 21 Feb 2026 22:09:05 +0800 Subject: [PATCH] fix --- .../components/Budget/BudgetChartAnalysis.vue | 36 +++++++++---------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/Web/src/components/Budget/BudgetChartAnalysis.vue b/Web/src/components/Budget/BudgetChartAnalysis.vue index 4014a14..57acf9a 100644 --- a/Web/src/components/Budget/BudgetChartAnalysis.vue +++ b/Web/src/components/Budget/BudgetChartAnalysis.vue @@ -459,24 +459,26 @@ const calculateChartHeight = (budgets) => { const varianceLabelPlugin = { id: 'variance-label-plugin', - afterDatasetsDraw: (chart) => { + afterDraw: (chart) => { const dataset = chart.data?.datasets?.[0] const metaData = dataset?._meta - if (!dataset || !metaData) { + if (!dataset || !metaData || !chart.chartArea) { return } const meta = chart.getDatasetMeta(0) - if (!meta?.data) { + if (!meta?.data || meta.data.length === 0) { return } const { ctx, chartArea } = chart const fontFamily = '"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif' ctx.save() - ctx.font = `12px ${fontFamily}` + ctx.font = `bold 11px ${fontFamily}` ctx.textBaseline = 'middle' + const padding = 6 + meta.data.forEach((bar, index) => { const item = metaData[index] if (!item || item.value === 0) { @@ -485,26 +487,22 @@ const varianceLabelPlugin = { const label = formatVarianceLabelValue(item.value) const textWidth = ctx.measureText(label).width - const position = bar.tooltipPosition ? bar.tooltipPosition() : { x: bar.x, y: bar.y } - const offset = 8 const isPositive = item.value > 0 - ctx.fillStyle = getVarianceLabelColor(item.value) - let x = position.x + (isPositive ? offset : -offset) - const y = position.y + const y = bar.y + let x - if (chartArea) { - const rightLimit = chartArea.right - 4 - const leftLimit = chartArea.left + 4 - if (isPositive && x + textWidth > rightLimit) { - x = rightLimit - textWidth - } - if (!isPositive && x - textWidth < leftLimit) { - x = leftLimit + textWidth + if (isPositive) { + x = Math.max(bar.x, bar.base) + padding + ctx.textAlign = 'left' + if (x + textWidth > chartArea.right - 4) { + x = chartArea.right - textWidth - 4 } + } else { + x = Math.max(bar.base, chartArea.left) + padding + ctx.textAlign = 'left' } - ctx.textAlign = isPositive ? 'left' : 'right' - + ctx.fillStyle = getVarianceLabelColor(item.value) ctx.fillText(label, x, y) })