Chart.js 数据标签：如何改变饼图内显示的文本的字体和颜色

Question

我正在使用 Chart.js

和datalabels

我已经从 Chart.js 及其插件中获得了我所需的所有功能。这是我的最终输出结果：

以下是我的代码：

  ( function ( $ ) {
            "use strict";
            /////////////Pie chart START here//////////////////////////////
            var ctx = document.getElementById( "pieChart" );
            ctx.height = 130;
            var myChart = new Chart( ctx, {
            type: 'pie',
            data: {
            datasets: [ {   
            data: [ 40, 20, 10, 3, 7, 15, 4, 52 ],
            backgroundColor: [
            "rgba(0,128,128)",
            "rgba(255,20,147)",
            "rgba(0,0,128)",
            "rgba(0,128,0)",
            "rgba(128,0,0)",
            "rgba(255,0,0)",
            "rgba(218,112,214)",
            "rgba(70,130,180)"
            ],
            hoverBackgroundColor: [
            "rgba(0,128,128)",
            "rgba(255,20,147)",
            "rgba(0,0,128)",
            "rgba(0,128,0)",
            "rgba(128,0,0)",
            "rgba(255,0,0)",
            "rgba(218,112,214)",
            "rgba(70,130,180)"
            ]
            } ],
            labels: [
            "Open",
            "On-Hold (Need Spares)",
            "In-Process",
            "Closed",
            "Re-Open",
            "On-Hold (Condemnation)",
            "On-Hold (For Decision)",
            "On-Hold (For Revision)"
            ]
            },
            options: {
            responsive: true,
                legend: {
                position: 'left',     
                    labels: {
                        fontSize:17,  
                    }
                }
            }

            } );
            /////////////Pie chart END here//////////////////////////////

        } )( jQuery );

现在我需要更改每个饼图切片内显示的文本（数据）的字体大小和颜色。有什么帮助吗？

附：我正在使用chart.js v2.7.2

- Muhammad Asif Raza

Answer 1

我使用Chart.js和datalabels，可以像这样做：

plugins: {
      datalabels: {
        color: #ffffff,
        formatter: function (value) {
          return Math.round(value) + '%';
        },
        font: {
          weight: 'bold',
          size: 16,
        }
      }
    }

当然，在我的示例中，我添加了“％”，这就是为什么我在格式化程序中使用该函数的原因。

请记住，“插件”是图表中“选项”的一部分。 这里是插件数据标签页面，提供更多您可以执行的操作。

- Sandy Veliz

---

谢谢 @Sandy Veliz。我忘记更新我的问题，因为我在另一个平台上找到了答案。 - Muhammad Asif Raza

请问您是怎么发现字体的呢？文档中只提到了颜色...谢谢。 - PhoenixPan

@PhoenixPan 在 datalabels 插件的文档页面中，这里有包含示例的链接：https://chartjs-plugin-datalabels.netlify.com/guide/labels.html - Sandy Veliz

哦，对了！我正在查看chartjs文档。看来我应该更加注意我在哪里搜索...谢谢你，伙计！ - PhoenixPan

Answer 2

如果想要更改字体，则可以按照以下步骤操作：

添加一个字体系列，例如：添加“Josefin Sans”字体系列。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans">

然后在字体 JSON 对象中提及 family: 'Josefin Sans'，如下所示：

plugins: {
      datalabels: {
        color: #ffffff,
        formatter: function (value) {
          return Math.round(value) + '%';
        },
        font: {
          weight: 'bold',
          size: 16,
          family: 'Josefin Sans',
        }
      }
}

- Rohit Jadhav

Answer 3

要为每个数据集更改颜色，您可以使用以下方法：

{
   data: {
datasets: [
{
  datalabels: {
    labels: {
      value: {
        color: 'green'
      }
    }
  }
}]
}

发现这个链接很有用 https://chartjs-plugin-datalabels.netlify.app/guide/labels.html#dataset-overrides

- Faheel Khan

Answer 4

在我的情况下，为了使它工作，我不得不给颜色值添加引号： color: "#ffffff",

plugins: {
      datalabels: {
        color: "#ffffff",
        formatter: function (value) {
          return Math.round(value) + '%';
        },
        font: {
          weight: 'bold',
          size: 16,
        }
      }
    }

- Ale DC

Answer 5

继续自2018年12月28日11:41回答 Sandy Veliz 67088个银徽章16

如果您仍然无法看到增加的价值，请在选项之外添加其他插件，如下所示：plugins: [ChartDataLabels]

现在您将有两个插件，一个在内部，另一个在上述之外

还请确保以正确的顺序导入正确的脚本文件，因为第二个脚本文件需要在第一个脚本文件之前；

- Sydney Abuya