如何使用 webview 在 React-Native 中使用 Highcharts？

Question

I want to render a chart inside a webview in react-Native. I used highcharts npm package.

I defined a Webview something like this

<WebView  ref='webview' />

In componentDidMount, I wrote

 componentDidMount(){

    var chart = Highcharts.chart(this.refs.webview,{
        series: [{
          data: [1, 3, 2, 4]
        }],
          // ... more options - see http://api.highcharts.com/highcharts 
      });
}

But it is throwing error.

Could anyone please point out what I am doing wrong here. Thanks

Answer 1

I'd recommend using react-native-highcharts or highcharts-react-native npm packages. It does this for you with a ChartView component in react-native-highcharts and a HigchchartsReactNative component in highcharts-react-native . I think you are writing the code for react-highcharts and attempting to put it in a WebView . I don't recommend this. Here are a few links

https://www.highcharts.com/blog/post/creating-mobile-charts-with-highcharts-react-native/

https://www.npmjs.com/package/react-native-highcharts

The main difference is that react-native-highcharts is a third party package that supports most of highcharts products like highstock or highmaps while highcharts-react-native only support highcharts .