如何在反应碳设计图表中设置颜色
How to set colors in react carbon design chart
我正在使用 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,颜色保持不变:
在碳设计图表框架中设置颜色的正确方法是什么?
我发现 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);
也可以使用 getFillColors
来覆盖 color.scale
,但目前 color.scale
似乎是强制性的
我正在使用 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,颜色保持不变:
在碳设计图表框架中设置颜色的正确方法是什么?
我发现 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);
也可以使用 getFillColors
来覆盖 color.scale
,但目前 color.scale
似乎是强制性的