Chart.js 如何在饼图上显示标签

Question

我最近将我的charts.js库更新至最新版本（2.5.0），但这个版本在图表上不显示标签。

我有一个在fiddler上工作的示例：http://jsfiddle.net/g6fajwg8。

然而，我完全按照示例定义了我的图表，但仍无法看到图表上的标签。

注：谷歌和Stackoverflow上有很多类似的问题，但大多数是关于之前的版本，而在那些版本中它们可以正常工作。

var config = {
    type: 'pie',
    data: {
        datasets: [{
            data: [
              1200,
              1112,
              533,
              202,
              105,
            ],
            backgroundColor: [
              "#F7464A",
              "#46BFBD",
              "#FDB45C",
              "#949FB1",
              "#4D5360",
            ],
            label: 'Dataset 1'
        }],
        labels: [
          "Red",
          "Green",
          "Yellow",
          "Grey",
          "Dark Grey"
        ]
    },
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: 'Chart.js Doughnut Chart'
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
};

window.pPercentage = new Chart(ChartContext, config);

- Jacob

Answer 1

看起来没有内置选项。

然而，有一个专门用于此选项的库，它称为：“Chart PieceLabel”。

这是他们的演示页面。

将其脚本添加到项目后，您可能需要添加另一个选项，名为：“pieceLabel”，并根据需要定义属性值：

pieceLabel: {
    // mode 'label', 'value' or 'percentage', default is 'percentage'
    mode: (!mode) ? 'value' : mode,

    // precision for percentage, default is 0
    precision: 0,

    // font size, default is defaultFontSize
    fontSize: 18,

    // font color, default is '#fff'
    fontColor: '#fff',

    // font style, default is defaultFontStyle
    fontStyle: 'bold',

    // font family, default is defaultFontFamily
    fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
}

- Jacob

---

我使用它，它运行得非常好。它在过滤时更改其值，并以漂亮的动画效果呈现。 - Jacob

有没有办法在Angular2中使用这个插件。我正在我的Angular 2项目中使用chart.js：https://dev59.com/questions/s1kT5IYBdhLWcg3wFruj#42556725 我正在导入插件，但它不起作用。控制台上没有错误。 - Hitesh Kumar

@HiteshKumar 看起来它不是作为一个模块制作的。使用npm下载文件时，build/目录下也包含一个min.js文件。我将其复制到public/assets/js/vendor/文件夹中，并从那里引用该文件。 - Dovev Hefetz

Piece Label是一个很棒的库，应该成为基本功能的一部分。 - JollyBrackets

我建议现在使用https://github.com/chartjs/chartjs-plugin-datalabels。这是来自Chart.JS的官方包，似乎得到更好的支持。 - FranzHuber23

Answer 2

使用数据标签插件 https://chartjs-plugin-datalabels.netlify.app/

HTML 集成

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

必须在 Chart.js 库加载后再加载！

你的代码将会像这样：

options: {
        plugins: {
            // Change options for ALL labels of THIS CHART
            datalabels: {
                color: '#36A2EB'
            }
        }
},
data: {
   datasets: [{
            // Change options only for labels of THIS DATASET
            datalabels: {
                color: '#FFCE56'
            }
   }]
}

如果您想覆盖默认情况下数据集的值作为标签显示，可以通过标签进行设置。例如：

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

- Rohit Jadhav

Answer 3

使用chartjs-plugin-datalabels，并设置以下选项：

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

它将呈现标签文本。

- Nsgt