我们如何在饼图圆弧上放置标签 - chart.js/vue-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.com/emn178/chartjs-plugin-labels

这是众所周知的目的。

这是一个demo

Answer 2

Chart js 支持的插件page does have a solution for it, it is this plugin chartjs-plugin-datalabels。确保像

一样在 main.js 中导入模块

import labels from 'chartjs-plugin-datalabels';

然后

Vue.use(labels)

并更新您的 Vue 页面：

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

更新： @zb22 提到的一个更容易使用的 module/plugin 是插件 chartjs-plugin-labels

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

import 'chartjs-plugin-labels';

并像

一样使用它

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

我们如何在饼图圆弧上放置标签 - chart.js/vue-chart.js

How do we put labels on pie chart arcs - chart.js/vue-chart.js

javascript

chart.js

vue-chartjs