如何在反应碳设计图表中设置颜色答案

【问题标题】：How to set colors in react carbon design chart如何在反应碳设计图表中设置颜色
【发布时间】：2021-02-20 10:55:38
【问题描述】：

我正在使用 carbon design charts 的反应库，但在图表选项属性中使用 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);

上面的代码适用于 v0.40.2 及以下版本，结帐this sandbox，它正确设置了颜色：

但在 v0.40.3 及更高版本中，它不再起作用了，请参阅this sandbox，颜色保持不变：

在碳设计图表框架中设置颜色的正确方法是什么？

【问题讨论】：

标签： javascript reactjs charts carbon-design-system

【解决方案1】：

我发现from the history，有一个更改需要在图表选项中指定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);

Checkout this sandbox

也可以使用覆盖color.scale 的getFillColors，但目前看来color.scale 是强制性的

【讨论】：