如何在反应中创建HighCharts图表 [英] How to create a HighCharts chart in react

问题描述

如何使用HighCharts图表创建一个组件，该组件在第一次渲染时创建图表组件，并在新数据进入时使用 chart.series [0] .setData data，true）;

How can I create a component with a HighCharts chart, that create the chart ones on the first render and only update the series data when new data comes in using chart.series[0].setData(data,true);

推荐答案

我制作了一个名为React JSX Highcharts的库，你在找什么。 GitHub / NPM

I have made a library called React JSX Highcharts, which might be what you're looking for. GitHub / NPM

它允许您使用React组件创建Highcharts图表。所以要更新系列数据，只需要传递更新的数据道具。

It allows you to create Highcharts charts with React components. So to update the series data, would just need to pass an updated data prop.

在幕后，React JSX Highcharts会为您调用 setData 。

Behind the scenes, React JSX Highcharts would call setData for you.

<HighchartsChart plotOptions={plotOptions}>
  <Chart />

  <Title>My Highcharts Chart</Title>

  <Legend layout="vertical" align="right" verticalAlign="middle" />

  <XAxis>
    <XAxis.Title>Time</XAxis.Title>
  </XAxis>

  <YAxis id="number">
    <YAxis.Title>My Axis Title</YAxis.Title>
    <LineSeries id="series1" data={data1} />
    <LineSeries id="series2" data={data2} />
  </YAxis>
</HighchartsChart>

这篇关于如何在反应中创建HighCharts图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！