highcharts 无法使用自定义图表组件呈现图表

jogvjijk 于 2023-10-20 发布在 Highcharts

关注(0)|答案(2)|浏览(163)

我是一个新手，React打字和自定义组件渲染图表的工作。我有一个名为StackedDonutChart的组件，它是用Highcharts创建的。

`export interface StackedDonutChartProps  {
  data: any[];
  colors: any[];
  size?: number;
};`


 

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

并作为

<StackedDonutChart 
      data={gaugeData} 
      colors={[this.colors]} />

但我只能看到下面所附的图像，而不是图表。在控制台中，我可以看到一切都像下面一样正常，而这个.colors的值是

availability
: 
"#A78D34"
lifecycle
: 
"#E0E0E0"
maintenance
: 
"#00D7D5"
performance
: 
"#0071B8"

：0 {y：97，颜色：'#0071B8'} 1：{y：81，颜色：'#A78D34'}长度：2【【原型】】：数组（0）

它给出这样的图表，即使数据显示在控制台中。请帮我拿这个。

highcharts

来源：https://stackoverflow.com/questions/77005135/unable-to-render-the-chart-with-custom-chart-component

2条答案

按热度按时间

zphenhs41#

下面是一个如何使用props将颜色或其他选项正确传递到图表的示例：

Demo：https://codesandbox.io/s/highcharts-react-typescript-pass-options-using-props-rzgc58?file=/index.tsx

赞(0）回复(0）举报 2023-10-20

fkvaft9z2#

let chartData: any[] = [];  
let chartColors: string[] = [];          
Object.keys(this.colors).forEach(key => {       
if(this.dashboardStore.systemHealthValueTotals.hasOwnProperty(key)) {  
const value = this.dashboardStore.systemHealthValueTotals[key];         
const color = this.colors[key];          
chartData.push(value);         
chartColors.push(color);         
gaugeData.push({name: key, value: value, color: color });

赞(0）回复(0）举报 2023-10-20

我来回答

highcharts 无法使用自定义图表组件呈现图表

2条答案

相关问题

热门标签

最新问答