Highcharts не рендерится: React + Typescript + Highcharts - PullRequest
Новая
       26

Highcharts не рендерится: React + Typescript + Highcharts

1 голос
/ 10 апреля 2019

Попытка вызвать хай-чарт с помощью реакции.У меня есть несколько вызовов API выборки (для иллюстрации я добавил только 2), данные которых я буду использовать для визуализации чего-либо в пользовательском интерфейсе.

В этом примере data1 используется для визуализации таблицы, data2 используетсядля рендеринга старшей диаграммы.

Я храню результаты этих вызовов в объекте состояния.Когда я вызываю эти API, я получаю данные, но не могу установить для них свойство «series» старших диаграмм для рендеринга, в результате чего ничто не обрабатывается.

Структура данных, которые я получаю

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

Может кто-нибудь помочь мне с этим?Куда я иду не так?

Я использую highcharts-response-official для этого

Код 

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;

1 Ответ

0 голосов
/ 10 апреля 2019

Вам необходимо предоставить формат данных, требуемый 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.column.data

...