Какой конфиг и опции мне нужны для реактивно-старших графиков, чтобы создать график OHL C для старшего товара?

Question

Я проходил через HighStock API, чтобы попытаться найти, какие config и options мне нужно передать компоненту ChartView в react-native-highcharts, чтобы нарисовать мой график. Мне трудно найти, какая комбинация config и options даст желаемый результат, например, series, dataGrouping, et c .... Мои данные - это двумерный массив с 4 значениями для OHL C. Мой желаемый результат - фотография в верхней части этого stackoverflow .

Вот мой код.

class OHLC extends React.Component {

static navigationOptions = ({ navigation }) => ({
    title: "OHLC",
    headerLeft: (
        <TouchableOpacity
            style={NavStyles.headerButton}
            onPress={() => navigation.openDrawer()}>
            <Icon name="bars" size={20} />
        </TouchableOpacity>
    ),
})
render() {
    var Highcharts='Highcharts';
    var conf={
        title: {
            text: 'Stock Name'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: 'Price'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        // tooltip: {
        //     formatter: function () {
        //         return '<b>' + this.series.name + '</b><br/>' +
        //             Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
        //             Highcharts.numberFormat(this.y, 2);
        //     }
        // },
        legend: {
            enabled: false
        },
        // exporting: {
        //     enabled: false
        // },
        series: [{
            type: 'ohlc',
            name: 'AAPL Stock Price',
            data: (function () {
                let arrays = aExtractFromJson(data,'data', null,null);
                arrays = ohlcExtractor(arrays);
                return arrays;
                // look at toFixed method for number to limit decimal point
            }()),
            dataGrouping: {
                units: [[
                    'week', // unit name
                    [1] // allowed multiples
                ], [
                    'month',
                    [1, 2, 3, 4, 6]
                ]]
            }
        }]
    };

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

    return (
        <View>
            <ChartView style={{height:300}} config={conf} options={options} stock={true} ></ChartView>
            //To see if anything gets rendered.
            <Text>HELLO DAVID!</Text>
        </View>
    );
}

}

Answer 1

После дальнейших исследований я смог найти config и options, необходимые для создания графика OHL C с использованием компонента ChartView в react-native-highcharts. У меня возникли некоторые проблемы с отображением пустого экрана, поэтому я добавил javaScriptEnabled={true} domStorageEnabled={true} originWhitelist={['']} к своему ChartView.

В config предметы первой необходимости:

• series с type: 'ohlc' и data: [[1,2,3,4],[2,3,4,5]] внутри.

В options, аргументы не требуются, я оставил это как options='' в ChartView.

Не забудьте добавить stock={true} в ChartView Мой код, например c пример:

import React, {Component} from 'react';
import {View} from 'react-native';
import ChartView from 'react-native-highcharts';
class OHLC extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        var Highcharts='Highcharts';
        var conf={
            chart: {
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                type: 'ohlc',
                name: 'Random data',
                /*Open, high,low,close values in a two dimensional array(two days)*/
                data: [[1,2,3,4],[2,3,4,5]],
            }]
        };

        return (
            <View style={{borderRadius: 4, marginTop: 30,}}>
                <ChartView style={{height:500}} config={conf} javaScriptEnabled={true} domStorageEnabled={true} originWhitelist={['']} stock={true} options=''></ChartView>
            </View>
        );
    }
}