Javascript 如何在反应碳设计图中设置颜色

我正在使用的react库，使用图表选项属性中的

getFillColor

函数设置自定义颜色时遇到困难：

import React from "react";
import ReactDOM from "react-dom";
import { DonutChart } from "@carbon/charts-react";
import "@carbon/charts/styles.css";

const colors = {
  java: "#FF0000",
  javascript: "#00FF00",
  "c++": "#0000FF"
};

const chartData = [
  {
    group: "java",
    value: 300
  },
  {
    group: "javascript",
    value: 600
  },
  {
    group: "c++",
    value: 200
  }
];

const demoDonutOptions = {
  getFillColor: (field) => {
    return colors[field];
  },
  height: "300px"
};

function App() {
  return (
    <div className="App">
      <h3>React Donut chart with label</h3>
      <div>
        <DonutChart data={chartData} options={demoDonutOptions} />
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
从“@carbon/charts react”导入{DonutChart}”；
导入“@carbon/charts/styles.css”；
常量颜色={
爪哇语：“FF0000”，
javascript:#00FF00“，
“c++”：“0000FF”
};
常量图表数据=[
{
组：“java”，
价值：300
},
{
组：“javascript”，
价值：600
},
{
小组：“c++”，
价值：200
}
];
常量解调={
getFillColor:（字段）=>{
返回颜色[字段]；
},
高度：“300px”
};
函数App（）{
返回(
带标签的反应甜甜圈图表
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（，它可以正确设置颜色：


但在v0.40.3及以上版本中，它不再工作，请参见，颜色保持不变：


在碳纤维设计图表框架中设置颜色的正确方法是什么？
我发现有一个更改需要在图表选项中指定
color.scale
属性：

const demoDonutOptions = {
  color: {
    scale: {
      java: "#FF0000",
      javascript: "#00FF00",
      "c++": "#0000FF"
    }
  },
  height: "300px"
};

请注意，所有组都需要在
color.scale
中指定，以使此示例正常工作：

import React from "react";
import ReactDOM from "react-dom";
import { DonutChart } from "@carbon/charts-react";
import "@carbon/charts/styles.css";

const colors = {
  java: "#FF0000",
  javascript: "#00FF00",
  "c++": "#0000FF"
};

const chartData = [
  {
    group: "java",
    value: 300
  },
  {
    group: "javascript",
    value: 600
  },
  {
    group: "c++",
    value: 200
  }
];

const demoDonutOptions = {
  color: {
    scale: colors
  },
  height: "300px"
};

function App() {
  return (
    <div className="App">
      <h3>React Donut chart with label</h3>
      <div>
        <DonutChart data={chartData} options={demoDonutOptions} />
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
从“@carbon/charts react”导入{DonutChart}”；
导入“@carbon/charts/styles.css”；
常量颜色={
爪哇语：“FF0000”，
javascript:#00FF00“，
“c++”：“0000FF”
};
常量图表数据=[
{
组：“java”，
价值：300
},
{
组：“javascript”，
价值：600
},
{
小组：“c++”，
价值：200
}
];
常量解调={
颜色：{
比例：颜色
},
高度：“300px”
};
函数App（）{
返回(
带标签的反应甜甜圈图表
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(

也可以使用
getFillColors
覆盖
color.scale
，但此时似乎必须使用
color.scale