React TypeScript中Highcharts自定义StackedDonutChart渲染失败求助

核心问题1：数据字段不匹配 #

Highcharts 饼图/堆叠甜甜圈图的数值字段默认是y，但你组装gaugeData时用了value字段，组件若直接将该数据传给Highcharts，会无法识别数值，导致渲染异常。虽然你给出的gaugeData示例里是y:97，但代码里写的是value: this.dashboardStore.systemHealthValueTotals[key]，这里存在代码与实际数据的不一致，必须修正。

核心问题2：Colors Prop传递错误 #

组件Props定义colors为数组类型any[]，但你传递的是[this.colors]——这是一个包含单个对象的数组，而this.colors本身是键值对对象。如果组件期望colors是颜色字符串数组，你需要传递Object.values(this.colors)来提取所有颜色值；另外，你已经在gaugeData的每个数据点里指定了color，此时再传递全局colors数组可能会导致Highcharts颜色逻辑冲突，建议优先使用数据点自带的颜色，去掉冗余的colors传递。

修正后的代码示例 #

1. 修正gaugeData组装逻辑

// 用明确的TypeScript类型代替any，便于排查问题
const gaugeData: Array<{name: string; y: number; color: string}> = [];

Object.keys(this.colors).forEach(key => {
  if (this.dashboardStore.systemHealthValueTotals.hasOwnProperty(key)) {
    gaugeData.push({
      name: key,
      y: this.dashboardStore.systemHealthValueTotals[key], // 替换value为y
      color: this.colors[key]
    });
  }
});

2. 修正组件传参

<StackedDonutChart 
  data={gaugeData} 
  // 若组件内部未依赖全局colors数组，可直接删除该行；若需要则传递颜色值数组
  // colors={Object.values(this.colors)} 
/>

额外建议：优化TypeScript类型定义 #

避免使用any，明确类型能提前发现错误：

// 定义数据点类型
export interface StackedDonutDataPoint {
  name: string;
  y: number;
  color: string;
}

// 修正Props类型
export interface StackedDonutChartProps  {
  data: StackedDonutDataPoint[];
  colors?: string[]; // 明确为颜色字符串数组
  size?: number;
};

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