我们如何将文本放置在饼图弧内

Question

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

 this.options = {
    responsive: true,
    maintainAspectRatio: false,
    devicePixelRatio: 2,
    tooltips: {
      enabled: true,
    },
    title: {
      display: true,
      text: 'Thread state %',
      position: 'bottom',
      fontSize: 20,
    },
    plugins: {
      labels: {
        render: 'percentage',
        fontColor: ['white', 'white', 'white'],
        precision: 2,
      },
    },
  };

我正在使用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,
    },
  };
},

我有类似下面的内容，并且仅当我将鼠标悬停在每个弧线上时才显示数据

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

Answer 1

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

为此而众所周知。

这是demo

Answer 2

Chart js支持的插件page确实有解决方案，就是这个plugin。确保您将main.js中的模块导入，例如

import labels from 'chartjs-plugin-datalabels';

然后是>>

Vue.use(labels)
并更新您的Vue页面：

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