我们如何在饼图弧线上贴标签 - chart.jsvue-chart.js

Question

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

UPDATE 我试了@zb22推荐的插件和这个，但是没有用。我是通过npm安装了这个插件

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

我有一个类似下面的东西，只有当我在每个弧线上移动时才会显示数据。

我的目的是显示我的图表，如下图。

Answer 1

你可以使用一个插件来实现这个功能。https:/github.comemn178chartjs-plugin-labels。

这一点是众所周知的。

这是个 演示

Answer 2

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

import labels from 'chartjs-plugin-datalabels';

然后

Vue.use(labels)

并更新您的Vue页面。

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

更新: @zb22提到的一个更容易使用的模块插件是plugin chartjs-plugin-labels

如果你使用的是Vue，只需将它导入到你的Vue组件中，如

import 'chartjs-plugin-labels';

用之

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