Chart.js 在饼图上显示标签

Posted 2023-02-16

【中文标题】Chart.js 在饼图上显示标签

【英文标题】：Chart.js Show labels on Pie chart

【发布时间】：2017-06-29 02:56:20

【问题描述】：

我最近将我的 charts.js 库更新为最新版本 (2.5.0)。 此版本不显示图表上的标签。

我有一个在提琴手上工作的例子：http://jsfiddle.net/g6fajwg8。

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

注意：在 Google 和 *** 上有很多这样的问题，但其中大部分是关于在它们上运行良好的旧版本。

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);

【参考方案1】：

使用 chartjs-plugin-datalabels 并像这样设置选项

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

它将呈现标签文本

【参考方案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];
                
            
        

【参考方案3】：

好像没有这样的内置选项。

但是，这个选项有一个特殊的库，它调用：“Chart PieceLabel”。

这是他们的demo。

将他们的脚本添加到项目后，您可能需要添加另一个选项，称为：“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"

【讨论】：

我用过，效果很好。它改变了它的过滤值，并用漂亮的动画来做。

有什么办法可以在Angular2中使用这个插件。我在我的 Angular 2 项目中使用图表 js：***.com/a/42556725/2879146 我正在导入插件，但它不起作用。控制台没有错误。

@HiteshKumar 它看起来不像是作为一个模块制作的。使用 npm 下载文件还包括 build/ 下的 min.js 文件。我将它复制到我的 public/assets/js/vendor/ 文件夹并从那里引用该文件。

piece label 是一个很棒的库，应该是基本功能的一部分

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