使用Highcharts创建可复用堆叠环形图组件遇渲染异常求助

你的代码存在几个关键问题，导致无法渲染出目标的堆叠环形图效果，以下是具体问题和修复步骤：

1. 图表类型与堆叠配置错误 #

你使用了column类型，但极坐标下的堆叠环形图应该用bar类型，并且需要开启堆叠模式，同时配置极坐标下的柱子布局参数：

• 在plotOptions中为bar（而非column）开启stacking: 'normal'，并设置pointPadding: 0, groupPadding: 0让柱子紧密贴合形成环形。
• 移除chart配置中的inverted属性，该配置会打乱极坐标布局。

2. 背景系列数据错误 #

第一个系列作为环形的背景层，数据应该是固定的最大值（比如100，对应百分比满值），而非复用业务数据，这样才能形成环形的底色。

3. 颜色配置错误 #

colors是图表级的全局配置，不是单个series的属性。要为每个数据点设置对应颜色，需要：

• 在主数据系列中开启colorByPoint: true，然后将colors配置放在图表顶级选项中，而非series内部。
• 背景系列单独设置固定颜色（比如你用的#222222）。

4. 坐标轴配置错误 #

• x轴需要设置tickPositions对应数据的索引（比如数据有6项，就设置[0,1,2,3,4,5]），不需要设置max:8，否则会出现多余的空白柱子。
• y轴需要设置max: 100（对应百分比满值），并关闭网格线等不必要的元素。

5. 标题位置错误 #

需要为标题添加align: 'center'，才能让平均值文本居中显示在环形中间。

修复后的完整组件代码 #

import * as React from 'react';
import Highcharts from 'highcharts';
// 导入highcharts-more模块，极坐标图表依赖该扩展
import HighchartsMore from 'highcharts/highcharts-more';
HighchartsMore(Highcharts);

interface StackDoughnutChartProps {
  containerId: string;
  data: number[];
  colors: string[];
}

export class StackDoughnutChart extends React.Component<StackDoughnutChartProps> {
  componentDidMount() {
    this.createChart();
  }

  createChart() {
    const { containerId, data, colors } = this.props;
    const dataLength = data.length;
    const average = data.reduce((sum, value) => sum + value, 0) / dataLength;

    const chartOptions: Highcharts.Options = {
      chart: {
        polar: true,
        backgroundColor: '#303030',
      },
      title: {
        text: `${average.toFixed(2)}%`,
        verticalAlign: 'middle',
        align: 'center',
        style: {
          color: '#ffffff',
          fontWeight: 'normal',
          fontSize: '24px',
        },
      },
      colors: colors,
      plotOptions: {
        bar: {
          borderRadius: 0,
          grouping: false,
          borderWidth: 0,
          stacking: 'normal',
          pointPadding: 0,
          groupPadding: 0,
        },
      },
      series: [
        {
          type: 'bar',
          color: '#222222',
          data: Array(dataLength).fill(100),
          enableMouseTracking: false,
        },
        {
          type: 'bar',
          data: data,
          colorByPoint: true,
        },
      ] as Highcharts.SeriesOptionsType[], 
      xAxis: {
        tickPositions: Array.from({length: dataLength}, (_, i) => i),
        visible: false,
      },
      yAxis: {
        max: 100,
        visible: false,
        gridLineWidth: 0,
      },
      legend: {
        enabled: false,
      },
      tooltip: {
        enabled: false,
      },
    };

    Highcharts.chart(containerId, chartOptions);
  }

  render() {
    return <div id={this.props.containerId} style={{width: '100%', height: '400px'}}></div>;
  }
}

额外注意事项 #

• 确保安装并导入了highcharts-more模块，否则极坐标图表无法正常渲染。
• 给图表容器设置固定宽高，避免因容器尺寸缺失导致图表渲染异常。
• 背景系列添加enableMouseTracking: false，可防止干扰主数据系列的交互逻辑（如果需要交互的话）。

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