Highcharts 不呈现:React+Typescript+Highcharts [英] Highcharts not rendering : React+Typescript+Highcharts

问题描述

尝试使用 react 调出高图.我有多个 fetch api 调用(为了说明，我只添加了 2 个)，我将使用它们的数据在 UI 中呈现某些内容.

Trying to bring up a highchart using react. I am having multiple fetch api calls(for illustration, I have added only 2) whose data I will be using to render something in the UI.

本例中data1用于渲染表格，data2用于渲染highchart.

In this example data1 is used to render a table, data2 is used to render a highchart.

我将这些调用的输出存储在一个状态对象中.当我调用这些 API 时，我正在获取数据，但无法将其设置为 highcharts 的系列"属性以进行渲染，因此没有渲染任何内容.

I am storing the outputs of these calls in a state object. When I am calling these API's, I am getting the data but unable to set it to "series" property of highcharts for rendering, as a result nothing is getting rendered.

api2":[{名称":测试1"，价值":12},{名称":测试2"，价值":9}]

"api2" : [ { "name" : "Test1", "value" : 12 }, { "name" : "Test2", "value" : 9 } ]

有人可以帮我解决这个问题吗?我哪里错了?

Can someone help me with this? Where am I going wrong?

我正在为此使用 highcharts-react-official

I am using highcharts-react-official for this

import * as React from 'react';
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official';

interface IState {
  data1: [];
  data2: [];
}

interface IProps {}

class Example extends React.Component<IProps,IState> {
  constructor(props:any)
  {
    super(props);
    this.state = {
       data1: [],
       data2: []
    }
  }

  componentDidMount()
  {
      Promise.all([
        fetch('http://localhost:3001/api1'),
        fetch('http://localhost:3001/api2')
      ])
      .then(([res1, res2]) => Promise.all([res1.json(), res2.json()]))
       .then(([data1, data2]) => this.setState({
         data1: data1, 
         data2: data2
      }));
  }

  render() {    
    let options:any;
    options = {
         chart: {
            type: 'column'
         },
      credits: false,
      exporting: {enabled: false},
      title: {
        text: ''
      },
      legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'bottom'
            },
      xAxis: {
        visible:false
      },
      yAxis: {
        visible:false
      },
      plotOptions: {
        column: {
          dataLabels: {
                        enabled: true                         }
        }
      },
      series: this.state.data2
     };

    return(
      <div className="an-content">
          //some table rendering will happen here
          <HighchartsReact
                 highcharts={Highcharts}
                 options={options} 
          />
      </div>
    )
  }
} 
export default Example;

推荐答案

需要提供Highcharts要求的数据格式:

You need to provide the data format required by Highcharts:

  this.setState({
      data2: data2.map(x => ({ name: x.name, data: [x.value] }))
  });

现场演示:https://codesandbox.io/s/7w2pw4p900

API 参考:https://api.highcharts.com/highcharts/series.列数据

这篇关于Highcharts 不呈现:React+Typescript+Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！