Официальный Highcharts + React, серия населения от JSON?

Question

У меня есть некоторые проблемы с заменой текущего графика в проекте на Highcharts.Я использую пакеты NPM highcharts-response-official (и highcharts), и он не отрисовывает «все» из ответа.

Проект довольно большой и просматривает старую реализацию диаграммы.быть довольно прямым с Речартом.Текущая выборка данных из ответа API выглядит примерно так (в оболочке ComposedChart):

data={chartData}

, которая затем отображает все необходимые данные.Я надеялся, что это будет простой обмен и просто заполнит Highcharts таким же образом, но это не так.

В методе возврата у меня есть это:

<HighchartsReact
 highcharts={Highcharts}
 options={options}
/>

И мои параметры в методе рендеринга у меня есть это:

const options = {

  chart: {
    events: {
        load: function () {
          console.log(JSON.stringify(chartData[2].value))
        }
      }
    },
  title: {
    text: ''
  },
  series: {
        name: 'test',
        data: chartData
  }

Такого рода работы.Журнал консоли печатает определенное значение, но если я попробую его в серии, например data: chartData [2] .value, это не сработает.При использовании data: chartData он отображает правильное количество записей из объекта в виде категорий (в данном случае 6 разных записей), но не более того.Это неправильно анализируется или в чем дело?

Спасибо!

-

РЕДАКТИРОВАТЬ:

Хорошо, вот как это выглядит сейчас, и это вроде работает.

chart: {
    events: {
      load: () => {
        this.state.testChart.map(data =>
        testData.push({
          name: data.time,
          x: data.temp,
          y: data.value
        })
      );
        this.setState({ data: testData });
      }
    }
  },

И в моей серии:

  series: [{
    type: 'column',
    name: 'Current year',
    data: testData
  },

Визуальный результат состоит в том, что Highcharts добавляет все 6 объектов в массив, который мне дает ответ (показывает 6 категорий).Но не отображает никаких данных из этих 6 записей.Это выглядит примерно так:

[
 {time: "2018-10-11", temp: "21", value: "10"}, 
 {time: "2018-10-10", temp: "12", value: "31"}
]

В то же время, когда изменяется временной интервал (например, нажатие кнопки, чтобы показать предыдущую неделю, которая обрабатывает testChart вне HC), эти 6 записей (и, следовательно, категории в HC) изменить, как и ожидалось.Так что это похоже на то, как мне нужно идти, но как сделать данные видимыми?Чего мне не хватает?

Answer 1

Возможно, вы пытаетесь создать график, когда данные еще не были загружены.Пожалуйста, посмотрите на пример ниже, вы можете увидеть, как вы можете создать диаграмму с динамическими данными:

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    fetch("https://api.myjson.com/bins/q4us4")
      .then(response => response.json())
      .then(data => {
        options.series[0].data = data;
        this.setState({ data: data });
      });
  }

  render() {
    return (
      <div>
        {this.state &&
          this.state.data && (
            <Chart options={options} highcharts={Highcharts} ref={"chart"} />
          )}
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Демонстрационная версия: https://codesandbox.io/s/mz35zwxjoj