如何让React Carbon Donut Chart显示实际值而非百分比？

我正在使用Carbon Donut Chart展示数据，但传入实际数值后，图表自动将其转换为百分比。我希望显示实际值而非百分比，查阅文档未找到对应配置属性，请问该如何实现？

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);

附当前输出效果截图：

要让Carbon Donut Chart显示实际数值而非百分比，只需在配置中自定义tooltip和数据标签的格式化逻辑即可，具体修改如下：

在demoDonutOptions里新增两项配置：

• 给tooltip设置格式化函数，让提示框直接返回原始数值；
• 开启dataLabels并设置格式化函数，让环形图上的标签显示实际值。

修改后的完整配置代码：

const demoDonutOptions = {
  getFillColor: (field) => {
    return colors[field];
  },
  height: "300px",
  // 自定义tooltip显示实际数值
  tooltip: {
    formatter: (item) => ({
      label: item.group,
      value: `${item.value}`
    })
  },
  // 开启并自定义环形图标签显示实际数值
  dataLabels: {
    enabled: true,
    formatter: (item) => `${item.value}`
  }
};

这样修改后，图表的提示框和环形图上的标签都会直接展示你传入的实际数值（300、600、200），不再自动转换为百分比。

内容的提问来源于stack exchange，提问作者louis