HighChart（区域）在TypeScript中动态更改系列颜色

Question

如何在React TypeScript中更改HighChart（area3D）系列颜色？系列数据将通过 setData() 更改，但我在尝试使用 Chart.series[i].update(SeriesOptionsType,true) 更改系列颜色时收到此错误“ TS2304: Cannot find name 'SeriesOptionsType'.”。

    componentDidUpdate(prevProps: Readonly<ComponentProps<AreaChartProps>>, prevState: Readonly<any>, snapshot?: any) {
        if (this.chartRef.current){
            const chart = this.chartRef.current.chart as Chart;
            for ( let i:number =0 ; i < chart.series.length ; i++){
                chart.series[i].setData(this.props.props.series[i].data,true,true,true);

                chart.series[i].color = this.props.props.series[i].color
                chart.series[i].update(SeriesOptionsType,true)
            }
        }else {
            console.log( "error chart reference not available")
        }
    }

并且还会收到此错误“TS2339：类型“SeriesOptionsType”上不存在属性“颜色”。类型“SeriesTiledwebmapOptions”上不存在属性“颜色”。”当使用下面的代码时

chart.series[0].options.color = "#008800";
chart.series[0].update(chart.series[0].options);

我搜索了整个网络，但没有找到任何有关使用打字稿更改颜色的信息。我也是脚本语言新手

Answer 1

要更新图表颜色，您应该使用 update 方法，并在那里为该系列指定新颜色。如果您在 TypeScript 中遇到错误，我建议您编写一个扩展 SeriesOptionsType 的接口。

类似于此演示：https://stackblitz.com/edit/highcharts-angular-property-xxx-doesnt-exist?file=src%2Fapp%2Fapp.component.ts