我们如何在饼图弧上添加标签 - chart.js/vue-chart.js答案

【问题标题】：How do we put labels on pie chart arcs - chart.js/vue-chart.js我们如何在饼图弧上添加标签 - chart.js/vue-chart.js
【发布时间】：2020-05-22 15:23:37
【问题描述】：

我正在使用VueChart js/ chart js 在我的 vue 项目中创建一个饼图，我想显示每个弧内的数据百分比，我们该怎么做？我在 Vue 中的代码：

fillData() {
  this.datacollection = {
    labels: ['T', 'W', 'R', 'B'],
    datasets: [
      {
        backgroundColor: [
          'rgb(51,122,183)',
          'rgb(226,142,65)',
          'rgb(0,169,157)',
          'rgb(217,83,79)',
        ],
        data: [
          this.tw.length,
          this.w.length,
          this.r.length,
          this.b.length,
        ],
        hoverBackgroundColor: ['#0275d8', '#f0ad4e', '#5cb85c', '#d9534f'],
      },
    ],
  };
  this.options = {
    responsive: true,
    maintainAspectRatio: false,
    devicePixelRatio: 2,
    tooltips: {
      enabled: true,
    },
    title: {
      display: true,
      text: 'Arcs state %',
      position: 'bottom',
      fontSize: 20,
    },
  };
},

更新我尝试了@zb22 推荐的插件，但它不起作用。我确实通过 npm 安装了插件

 this.options = {
    plugins: {
      labels: {
        render: 'percentage',
        fontColor: ['white', 'white', 'white'],
        precision: 2,
      },
    },
  };

我有类似下面的东西，只有当我将鼠标悬停在每个弧上时它才会显示数据

我的目标是显示我的图表如下：

【问题讨论】：

标签： javascript chart.js vue-chartjs

【解决方案1】：

您可以使用插件来实现此目的： https://github.com/emn178/chartjs-plugin-labels

为此目的而广为人知。

这是demo

【讨论】：

更新了我的问题我试过了，但似乎没有用，可能是因为 Vue js？
我们必须在 main.js 中导入它吗？
试试import 'chartjs-plugin-datalabels'
该导入用于插件github.com/chartjs/chartjs-plugin-datalabels
导入类似 import 'chartjs-plugin-labels';这行得通

【解决方案2】：

Chart js 支持的插件page 确实有解决方案，就是这个插件chartjs-plugin-datalabels。确保在 main.js 中导入模块，就像

import labels from 'chartjs-plugin-datalabels';

然后

Vue.use(labels)

并更新您的 Vue 页面：

this.options = {
    plugins: {
      labels: [
        {
          render: 'value',
        }
      ],
    },
  };

更新：@zb22 提到的更易于使用的模块/插件是插件chartjs-plugin-labels

如果您使用的是 vue，只需将其导入您的 Vue 组件中，例如

import 'chartjs-plugin-labels';

并像使用它一样

 this.options = {
    plugins: {
      labels: [
        {
          render: 'percentage',
          fontColor: ['green', 'white', 'red'],
          precision: 2,
        }
      ],
    },
  };

【讨论】：