0

我一直在通过 HighStock API 来尝试找到config需要options传递给ChartView组件react-native-highcharts以绘制图表的内容。我很难找到什么组合config并且options会得到我想要的结果，比如series，dataGrouping等等......。我的数据是一个二维数组，有 4 个 OHLC 值。我想要的结果是这个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>
    );
}

}

4

1 回答 1

0

经过进一步研究，我能够找到config并options需要使用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 代码，基本示例：

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>
        );
    }
}
于 2020-01-27T07:03:00.670 回答