TA貢獻1850條經驗 獲得超11個贊
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);
舉報