Chart.js 更改条形图内部值的颜色

Question

所以我想做的是更改条形图条形图中值的颜色。我已经尝试了所有选项，也有一支笔似乎不起作用：https://codepen.io/vbbalaji/pen/oNbwbpm

[![Bar Chart][1]][1]

[1]: https://i.stack.imgur.com/a8lE7.png ]

Answer 1

这里有两个问题：

您需要包含 chartjs datalabels script in order to use it. Make sure you include this script after the main Chart.js library: https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0。
您的 datalabels 选项应嵌套在键 plugins.
中

这是更正后的配置：

{
  type: "horizontalBar",
  data: {
    labels: ["Red", "Amber", "Green"],
    datasets: [
      {
        backgroundColor: ["#db5935", "#f0ae43", "#3cba9f"],
        data: [2, -4, 6]
      }
    ]
  },
  options: {
    legend: { display: false },
    title: { display: true, text: "Health Variance" },
    plugins: {
      datalabels: {
        color: "blue",
        labels: {
          title: { color: "blue", font: { weight: "bold" } },
          value: { color: "green" }
        }
      }
    }
  }
}

看起来像这样：

这是您更新后的代码笔：https://codepen.io/typpo/pen/oNbwxvK

Chart.js 更改条形图内部值的颜色

Chart.js Change color of the values inside the bars of a Bar chart

label

colors

chart.js

Chart.js 更改条形图*内部*值的颜色

Chart.js Change color of the values *inside* the bars of a Bar chart

label

colors

chart.js

Chart.js 更改条形图内部值的颜色

Chart.js Change color of the values inside the bars of a Bar chart