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

我在与this库的react-native上使用highchart。我已经从高图表官方站点创建了简单的活动量表组件。这是组件的代码。

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组件内部使用带有highchart的getOptions或color或theme或其他变量。

最佳答案

您需要在这里了解几件事：


react-native-highcharts库创建动态html内容，然后注入到Webview中。在库中的config函数之后，在ChartView的flattenObject道具中传递的所有内容都将转换为字符串内容。
如果查看库中html内容的起始代码，您会发现其中包含一些javascript依赖项，其中之一是highcharts。这个highcharts库将在webview内部的javascript本地范围内创建变量Highcharts。
之所以会出现此错误，是因为React认为Highchart必须在组件中的某个位置定义并将Highchart定义为字符串，因此，如果访问string.function，它将抛出错误。
（解决方案）这里有两种选择，要么调整库中的代码，使其接受扁平字符串作为props，然后将此字符串直接传递给ChartView，要么可以在根组件内部创建虚拟Highchart对象，以使React停止抱怨Highchart对象。一旦此对象通过CharView传递，图表将在webview和BOOM中的javascript范围内可用highchart。


现在您知道了问题，可以提出更多解决方案。希望这可以帮助！

关于javascript - 如何将HighChart.getOption()与react-native-highchart一起使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53372627/