如何更改 Chartjs 标签的字体颜色

Question

我在 Chart.js 中创建了一个饼图，但不知道如何更改每个饼片内计数的字体颜色。这是我的代码

const options = {
    plugins: {
      legend: {
        display: true,
        labels: {
          usePointStyle: true,
          pointStyle: "rectRounded",
        },
      },
      title: {
        display: false,
        text: "Use of App",
      },
      tooltip: {
        callbacks: {
          label: function (context: any) {
            const label = context.label || "";
            const value = context.parsed;
            const total = context.dataset.data.reduce(
              (a: number, b: number) => a + b,
              0
            );
            const percentage = calculatePercentage(value, total);
            return `${label}: ${value} (${percentage})`;
          },
        },
      },
    },
  };

任何帮助都会很棒！

Answer 1

您需要将 fontColor 添加到有问题的对象中：

fontColor: "blue",

---

const options = {
    plugins: {
      legend: {
        display: true,
        labels: {
          usePointStyle: true,
          pointStyle: "rectRounded",
          fontColor: "blue"
        },
      },
      title: {
        display: false,
        text: "Use of App",
      },
      tooltip: {
        callbacks: {
          label: function (context: any) {
            const label = context.label || "";
            const value = context.parsed;
            const total = context.dataset.data.reduce(
              (a: number, b: number) => a + b,
              0
            );
            const percentage = calculatePercentage(value, total);
            return `${label}: ${value} (${percentage})`;
          },
        },
      },
    },
  };