Question

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

在我使用插件添加了<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
            }
        }
    });
}

Answer 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

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

1 个答案: