我们能在React-Native中使用Highcharts吗？

Question

目前我在我的Web应用程序中使用Highcharts，但现在我正在使用React-native构建Android应用程序。 Highcharts能与React-native配合使用吗？

- Prashant Agrawal

---

这里有官方Highcharts文章介绍如何在React中使用Highcharts，你或许可以在那里获得更多信息。 - Kacper Madej

页面似乎现在不可用。 - Harkirat Saluja

这里的大多数答案看起来已经过时了。请参考我在2019年的回答。 - mukesh.kumar

Answer 1

HighCharts使用DOM，无法直接在React Native中使用HighCharts或依赖于DOM的图表库，但可以在React Native中使用WebView与图表库一起使用。我没有特别使用过High Charts，但已经在WebView中使用了其他图表库，并且效果很好。

- Nader Dabit

---

谢谢@Nader。但我仍然很难理解如何在webview中呈现此图表。我正在使用Highcharts npm包，但仍然无法弄清如何将其与webview一起使用。 - Prashant Agrawal

那算是一个不同的问题，与此无关。如果@Nader的答案适用的话，我建议您接受他的答案，并为在WebView中使用HighCharts的指导创建一个单独的问题。 - hazardous

Answer 2

你可以使用此组件将配置 json 发送到组件，并且它将被显示出来。 https://github.com/TradingPal/react-native-highcharts

- Bernardo Orozco Garza

Answer 3

在React Native应用中，您可以利用Highcharts的两种主要方式是：

1. WebView组件。我也在其他平台上（Appcelerator Titanium）使用了这种技术。
2. 官方为React提供的最小Highcharts包装器：highcharts-react-native。
   目前的前提条件是：
   • node 11.2+
   • npm 6.7.0+或类似的软件包管理器
   • React 16.4+
   • React native 0.59.3+

安装方法：

npm install @highcharts/highcharts-react-native

注意：还有其他非官方的包装器，如react-native-highcharts，但我没有使用过它们。

- mukesh.kumar

Answer 4

你可以使用这个模块：react-native-highcharts。

它使用 Android 或 iOS 上的 Web 引擎和 Highcharts JavaScript 模块来呈现动态图表。

示例：

<ChartView style={{height:300}} config={conf}></ChartView>

- Donald P. Morton

Answer 5

在ChartView组件中加入以下代码：originWhitelist={['']}

示例：

<ChartView style={{height:300}} config={conf} originWhitelist={['']}></ChartView>

- Matias Serafini