fix

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
+      const y = bar.y
+      let x
+
+      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.fillStyle = getVarianceLabelColor(item.value)
-      let x = position.x + (isPositive ? offset : -offset)
-      const y = position.y
-
-      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
-        }
-      }
-
-      ctx.textAlign = isPositive ? 'left' : 'right'
-
       ctx.fillText(label, x, y)
     })