在饼图上显示标签而不是数据值 Chart.js答案

【问题标题】：Show Labels on Pie pieces instead of Data values Chart.js在饼图上显示标签而不是数据值 Chart.js
【发布时间】：2019-11-29 20:04:54
【问题描述】：

我使用 Chart.js 制作图表。我今天发现了原始 Chart.js 的新插件。

Plugin

在我使用插件添加<script> 标签后，它会自动将值应用于我的所有图表。它看起来很棒，但它显示了数值。我如何让它显示标签而不是馅饼上的值？我找到了一些关于这个主题的帖子，但它们包含不同的命令，我尽我所能，但它没有改变任何东西。也为了将来，请告诉我如何关闭特定图表的显示值:)

fillPie()
{
    // Three arrays have same length
    let labelsArr = [];    // Array with some names
    let values  = [];   // Array with values
    let randomColor  = [];

    var ctx = document.getElementById('pie-chart').getContext('2d');
    var chart = new Chart(ctx, {

        // The type of chart we want to create
        type: 'pie',

        // The data for our dataset
        data: {
            labels: labelsArr,    // I want it to show these labels
            datasets: [{
                backgroundColor: randomColor, 
                data: values,     // It shows these values
                hoverBackgroundColor: "#fba999"
            }]
        },

        // Configuration options go here
        options: {
            legend: {
                display: false
            }
        }
    });
}

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

您可以在插件的文档中找到答案： https://chartjs-plugin-datalabels.netlify.com/guide/formatting.html#custom-labels

options: {
  plugins: {
    datalabels: {
      formatter: function(value, context) {
        return context.chart.data.labels[context.dataIndex];
      }
    }
  }
}

开发者 simonbrunel explained on GitHub 如何在全局范围内或针对特定数据集禁用插件。以下是来自 GitHub 链接的引用：

这应该可以通过使用显示选项在图表级别通过插件选项禁用所有数据集的标签，然后在数据集级别启用每个数据集的标签 (dataset.datalabels.*)：

new Chart('id', {
  data: {
    datasets: [{
      // no datalabels for this dataset
    }, {
        datalabels: {
          // display labels for this specific dataset
          display: true
        }
    }
  },
  options: {
    plugins: {
      datalabels: {
         // hide datalabels for all datasets
         display: false
      }
    }
  }
})

您还可以使用以下方法全局禁用所有图表的标签：

// Globally disable datalabels
Chart.defaults.global.plugins.datalabels.display = false

【讨论】：