javascript - 如何将 HighChart.getOption() 与 react-native-highchart 一起使用

Question

我在react-native上使用highchart this图书馆。我从 Highcharts 官方网站创建了简单的事件仪表组件。这是组件的代码。

import ChartView from 'react-native-highcharts';
import React, { Component } from 'react';

export default class Speedometer extends Component {



    render() {
      var Highcharts='Highcharts';
      var conf={


     chart: {
            type: 'solidgauge',
            height: '110%',

        },
        ....
        series: [{
            name: 'Move',
            data: [{
                color: Highcharts.getOptions().colors[0],
                radius: '112%',
                innerRadius: '88%',
                y: 80
            }]
        }, {
            name: 'Exercise',
            data: [{
                color: Highcharts.getOptions().colors[1],
                radius: '87%',
                innerRadius: '63%',
                y: 65
            }]
        }, {
            name: 'Stand',
            data: [{
                color: Highcharts.getOptions().colors[2],
                radius: '62%',
                innerRadius: '38%',
                y: 50
            }]
        }]
    };

      const options = {
          global: {
              useUTC: false
          },
          lang: {
              decimalPoint: ',',
              thousandsSep: '.'
          }
      };

      return (
        <ChartView style={{height:300}} more guage config={conf} options={options}></ChartView>
      );
    }
}

当我在屏幕上渲染此组件时，出现错误

TypeError: TypeError: TypeError: TypeError: undefined is not a function (evaluating 'Highcharts.getOptions()')

我如何在react-native组件中使用getOptions或颜色或主题或其他带有highchart的变量。

Answer 1

这里您需要了解一些事情:

1. react-native-highcharts库创建动态 html 内容，然后注入(inject)到 webview 中。无论 config 中传递了什么ChartView的 Prop flattenObject之后转为字符串内容库内的函数。
2. 如果您查看库内 html 内容的起始代码，您会发现其中包含了一些 javascript 依赖项，其中之一是 highcharts 。这个 highcharts 库将使变量 Highcharts在 webview 内 javascript 的本地范围内。
3. 您收到此错误是因为 React 认为 Highchart必须在组件中的某个位置定义并定义 Highchart作为字符串，因此如果您访问 string.function 它将抛出错误。
4. (解决方案)您在这里有两个选择，要么调整库内的代码，使其接受平面字符串作为 Prop ，然后将此字符串直接传递给 ChartView ，或者您可以创建虚拟 Highchart根组件中的对象以创建 React停止提示 Highchart目的。一旦这个对象通过CharView highchart 将在您正在加载的图表的 webview 和 BOOM 内的 javascript 范围内可用。

现在你知道了问题所在，你可以想出更多的解决方案。希望这有帮助!