如何让Vue Chart JS中的图表标签始终可见（无需鼠标悬停）

要让饼图的标签及数据始终显示，无需鼠标悬停触发，你需要使用chartjs-plugin-datalabels插件，以下是具体实现步骤：

1. 安装插件 #

在项目中安装该插件：

npm install chartjs-plugin-datalabels --save

2. 修改组件代码 #

更新你的组件，注册插件并配置显示选项：

<template>
  <Pie :data="ameacas.chartData" :options="ameacas.chartOptions" style="width: 300px; height: 300px;" />
</template>

<script lang="ts">
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
import { Pie } from 'vue-chartjs'
import ChartDataLabels from 'chartjs-plugin-datalabels' // 导入插件

// 注册插件
ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels)

export default {
  name: 'TdPie',
  components: {
    Pie
  },
  props: {
    threats: {
      type: Array,
      required: true
    }
  },
  computed: {
    ameacas: function () {
      return {
        chartData: {
          labels: ['高风险', '中风险', '低风险'],
          datasets: [
            {
              backgroundColor: ['#CC092F', '#DD3820', '#FCBA03'],
              data: [this.getHighThreat, this.getMediumThreat, this.getLowThreat]
            }
          ]
        },
        chartOptions: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            // 配置图例（可选，按需调整）
            legend: {
              position: 'right'
            },
            // 配置数据标签
            datalabels: {
              // 自定义显示内容：标签+数值
              formatter: (value, ctx) => {
                const label = ctx.chart.data.labels[ctx.dataIndex]
                return `${label}: ${value}`
              },
              color: '#fff', // 标签文字颜色
              font: {
                weight: 'bold',
                size: 12
              }
            }
          }
        }
      }
    },
    getHighThreat: function () {
      return this.threats
        .filter(threat => threat.severity && threat.severity.toLowerCase() === 'high')
        .length;
    },
    getMediumThreat: function () {
      return this.threats
        .filter(threat => threat.severity && threat.severity.toLowerCase() === 'medium')
        .length;
    },
    getLowThreat: function () {
      return this.threats
        .filter(threat => threat.severity && threat.severity.toLowerCase() === 'low')
        .length;
    }
  }
}
</script>

关键配置说明 #

• plugins.datalabels.formatter：自定义标签显示内容，示例返回“标签: 数值”格式，你也可以改成百分比或仅显示数值
• color：设置标签文字颜色，确保在饼图色块上清晰可见
• font：调整文字大小和粗细，提升可读性

如果不需要默认的悬停提示框，可在chartOptions中添加tooltip: { enabled: false }禁用它。

内容的提问来源于stack exchange，提问作者Felipe Costacurta Paruce