Как использовать HighChart.getOption () с response-native-highchart

Question

Я использую 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()')

Как я могу использовать getOptions, цвета, тему или другую переменную с высокой диаграммой внутри собственного компонента реакции.

Answer 1

Вы должны понять несколько вещей здесь:

1. react-native-highcharts библиотека создает динамический HTML-контент, а затем внедрить в веб-просмотр. Все, что передается в config реквизитах ChartView, преобразуется в строковое содержимое после функции flattenObject внутри библиотеки.
2. Если вы посмотрите на начальный код html-содержимого внутри библиотеки, вы увидите, что были включены некоторые зависимости javascript, и одна из них - highcharts. Эта высокоуровневая библиотека сделает переменную Highcharts в локальной области видимости javascript внутри webview.
3. Вы получаете эту ошибку, потому что React считает, что Highchart должен быть определен где-то в компоненте и определять Highchart как строку, поэтому, если вы получите доступ к string.function, он выдаст ошибку.
4. (Решение) у вас есть два варианта: либо настроить код внутри библиотеки и заставить его принимать плоскую строку в качестве реквизита и передавать эту строку непосредственно в ChartView, либо вы можете создать фиктивный объект Highchart внутри вашего корневой компонент, чтобы React перестал жаловаться на объект Highchart. Как только этот объект будет пройден через CharView, будет доступна старшая диаграмма в области javascript внутри webview и BOOM, которую вы загружаете в Графики.

Теперь вы знаете проблему, вы можете придумать больше решений. Надеюсь, это поможет!