highcharts react使用方法

HighchartsReact

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

// The wrapper exports only a default component that at the same time is a
// namespace for the related Props interface (HighchartsReact.Props) and
// RefObject interface (HighchartsReact.RefObject). All other interfaces
// like Options come from the Highcharts module itself.

const options: Highcharts.Options = {
    title: {
        text: 'My chart'
    },
    series: [{
        type: 'line',
        data: [1, 2, 3]
    }]
}

// React supports function components as a simple way to write components that
// only contain a render method without any state (the App component in this
// example).

const App = (props: HighchartsReact.Props) => {
  const chartComponentRef = useRef<HighchartsReact.RefObject>(null);

  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
      ref={chartComponentRef}
      {...props}
  );
}
// Render your App component into the #root element of the document.
ReactDom.render(<App />, document.getElementById('root'));

Highcharts.chart

import Highcharts from 'highcharts';
...
const [seriesData, setSeriesData] = useState([]);
const options={...};

    
function renderChart() {
  Highcharts.chart('highchartsContainer', { ...options });
}

useEffect(() => {
  renderChart();
}, [seriesData]);
// 宽度自适应
useEffect(() => {
  Highcharts.chart(highchartsContainer, { ...options }).setSize(throttledValue);
}, [throttledValue]);

useEffect(() => {
  Highcharts.setOptions({
    lang: {
      resetZoom: '重置',
      // resetZoomTitle: '重置'
      thousandsSep: ',',
    },
    global: {
      useUTC: false,
    },
  });
  renderChart();
}, []);
...
// render
<div id="highchartsContainer" style={{ width: throttledValue, height: '100%' }}></div>