Как получить данные в старшую диаграмму в приложении реакции

Question

Возможно ли получить высокие графики, https://www.npmjs.com/package/highcharts с данными json? Я использую приложение реакции. я пробую этот способ c:

import React from 'react'
import { render } from 'react-dom'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

const options = {
    title: {
      text: 'My chart'
 },
  series: [{
   data: [1, 2, 3]
   }]
 }

 const App = () => <div>
 <HighchartsReact
  highcharts={Highcharts}
  options={options}
 />
 </div>

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

, он работает, но я хочу, чтобы мои данные отображались. мой json выглядит так:

 [
  {
    "Date": "2019-10-29",
    "Price1": 55.34,
    "Price2": 61.05,
    "Price3": 1.791
  },
  {
    "Date": "2019-10-28",
    "Price1": 55.6,
    "Price2": 60.39,
    "Price3": 1.784
  }
]

Answer 1

Вы можете получить данные в функции componentDidMount / useEffect и обновить параметры диаграммы в состоянии, например:

const App = () => {
  const [options, setOptions] = useState({
    title: {
      text: "My chart"
    },
    series: [{ data: [] }]
  });

  useEffect(() => {
    fetch("https://api.myjson.com/bins/7lxy4")
      .then(response => {
        return response.json();
      })
      .then(data => {
        setOptions({ series: [{ data: data }] });
      });
  }, []);

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

---

Демонстрационная версия: https://codesandbox.io/s/highcharts-react-demo-v47y7