Question

我在带有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或颜色或主题或其他变量。

Answer 1

您需要在这里了解一些内容：

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

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

如何将HighChart.getOption（）与react-native-highchart一起使用

1 个答案: