Chart.js 在餅圖上顯示標簽

Question

我最近將我的 charts.js 庫更新到最新版本 (2.5.0)。 此版本不顯示圖表上的標簽。

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

然而，我完全按照示例中的方式定義了我的圖表，但仍然看不到圖表上的標簽。

注意：在 Google 和 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);

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"
}

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];
                }
            }
        }
}

Answer 3

使用 chartjs-plugin-datalabels 並設置這樣的選項

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

它將呈現標簽文本

Answer 4

 const config = { type: 'pie', data: data, options: { plugins: { title: { display: true, text: 'this is the title', position:'bottom' }, } } };