如何在ChartJS环形图点击时添加顶部自定义边框？

直接用ChartJS的自定义插件就能实现这个需求，核心思路是监听图表点击事件记录选中项，再在绘制阶段手动绘制仅顶部的边框路径。

实现步骤 #

• 定义ChartJS插件，在afterDraw钩子中根据选中状态绘制自定义顶部边框
• 在Vue组件中维护选中扇区的索引和对应颜色的响应式变量
• 绑定图表的点击事件，更新选中状态并触发重绘

完整Vue组件代码示例 #

<template>
  <div class="container mt-4">
    <canvas ref="doughnutChart"></canvas>
  </div>
</template>

<script>
import { Chart, registerables } from 'chart.js'
Chart.register(...registerables)

export default {
  data() {
    return {
      chart: null,
      selectedSector: {
        index: -1,
        color: ''
      },
      chartData: {
        labels: ['A', 'B', 'C', 'D'],
        datasets: [{
          data: [30, 20, 40, 10],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'],
          hoverOffset: 4
        }]
      },
      // 每个扇区对应的顶部边框颜色
      borderColors: ['#FF0000', '#0000FF', '#FFFF00', '#00FF00']
    }
  },
  mounted() {
    this.initChart()
  },
  beforeUnmount() {
    this.chart?.destroy()
  },
  methods: {
    initChart() {
      const ctx = this.$refs.doughnutChart.getContext('2d')
      const customBorderPlugin = {
        id: 'customTopBorder',
        afterDraw: (chart) => {
          if (this.selectedSector.index === -1) return

          const sector = chart.getDatasetMeta(0).data[this.selectedSector.index]
          const { outerRadius, innerRadius, startAngle, endAngle } = sector
          const centerX = chart.chartArea.left + chart.chartArea.width / 2
          const centerY = chart.chartArea.top + chart.chartArea.height / 2

          // 限定仅绘制环形顶部的弧段（对应角度范围：3π/2 到 π/2）
          const topStart = Math.max(startAngle, Math.PI * 1.5)
          const topEnd = Math.min(endAngle, Math.PI * 0.5)

          // 仅当扇区覆盖顶部区域时绘制边框
          if (topStart < topEnd) {
            ctx.save()
            ctx.strokeStyle = this.selectedSector.color
            ctx.lineWidth = 4
            ctx.beginPath()
            // 绘制外弧顶部
            ctx.arc(centerX, centerY, outerRadius, topStart, topEnd)
            // 反向绘制内弧顶部，形成闭合的边框
            ctx.arc(centerX, centerY, innerRadius, topEnd, topStart, true)
            ctx.closePath()
            ctx.stroke()
            ctx.restore()
          }
        }
      }

      this.chart = new Chart(ctx, {
        type: 'doughnut',
        data: this.chartData,
        options: {
          responsive: true,
          onClick: (event, elements) => {
            if (elements.length > 0) {
              const clickedIndex = elements[0].index
              // 切换选中状态：点击已选中项则取消，否则选中当前项
              this.selectedSector = this.selectedSector.index === clickedIndex
                ? { index: -1, color: '' }
                : { index: clickedIndex, color: this.borderColors[clickedIndex] }
              this.chart.update()
            }
          }
        },
        plugins: [customBorderPlugin]
      })
    }
  }
}
</script>

关键说明 #

• 插件通过获取扇区的角度范围，精准计算出需要绘制的顶部弧段，避免绘制完整边框
• 点击事件中切换选中状态，通过chart.update()触发重绘，让插件重新渲染边框
• 边框颜色可通过borderColors数组自定义，与每个扇区一一对应

内容的提问来源于stack exchange，提问作者sluxzer