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

Question

我想在 react-Native 的 webview 中呈現圖表。 我使用了 highcharts npm 包。

我定義了一個像這樣的 Webview

<WebView  ref='webview' />

在 componentDidMount 中，我寫了

 componentDidMount(){

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

但它正在拋出錯誤。

誰能指出我在這里做錯了什么。 謝謝

Answer 1

我建議使用react-native-highcharts或highcharts-react-native npm 包。 它使用 react-native-highcharts 中的HigchchartsReactNative組件和highcharts-react-native中的ChartView組件為您執行此操作。 我認為您正在編寫react-highcharts的代碼並試圖將其放入WebView中。 我不推薦這個。 這里有幾個鏈接

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

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

主要區別在於react-native-highcharts是第三方包，支持大多數 highcharts 產品，如highstock或highmaps ，而highcharts-react-native僅支持highcharts 。