Question

我已经使用https://github.com/TradingPal/react-native-highcharts在React-Native中渲染Highcharts，如StackOverflow的其他文章中所见。而且可以很好地绘制图表，但是问题出在我需要细化图表时。

React-Native-Highcharts是Highcharts的包装，它使用CDN中的源代码生成我们需要的图表。我有一个图表配置，必须作为道具传递给<ChartView></ChartView>。最初，我发现在react-native-highcharts包装器中没有向下钻取模块，然后我在nodemodules中进行了编辑以包括脚本。之后，我将整个HTML打印在控制台中，将其另存为HTML文件以在Chrome中运行，然后看到一切都是按需进行的。但是，当涉及到React-Native <WebView/>时，就不会进行深入挖掘。

React-Native-Highcharts节点模块代码：

const win = Dimensions.get('window');
class ChartWeb extends Component {
    constructor(props) {
        super(props);

        this.state = {
            init: `<html>
                    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
                    <style media="screen" type="text/css">
                    #container {
                        width:100%;
                        height:100%;
                        top:0;
                        left:0;
                        right:0;
                        bottom:0;
                        position:absolute;
                        user-select: none;
                        -webkit-user-select: none;
                    }
                    </style>
                    <head>
                        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
                        ${this.props.stock ? '<script src="https://code.highcharts.com/stock/highstock.js"></script>'
                    : '<script src="https://code.highcharts.com/highcharts.js"></script>'}
                        ${this.props.more ? '<script src="https://code.highcharts.com/highcharts-more.js"></script>'
                    : ''}
                        ${this.props.guage ? '<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>'
                    : ''}  
                    <script src = "https://code.highcharts.com/modules/drilldown.js"></script>  
                        <script src="https://code.highcharts.com/modules/exporting.js"></script>

                        <script>
                        $(function () {
                            Highcharts.setOptions(${JSON.stringify(this.props.options)});
                            Highcharts.${this.props.stock ? 'stockChart' : 'chart'}('container', `,
            end: `           );
                        });
                        </script>
                    </head>
                    <body>
                        <div id="container">
                        </div>
                    </body>
                </html>`,
            Wlayout: {
                height: win.height,
                width: win.width
            }
        }
    }

    // used to resize on orientation of display
    reRenderWebView(e) {
        this.setState({
            height: e.nativeEvent.layout.height,
            width: e.nativeEvent.layout.width,
        })
    }

    render() {
        let config = JSON.stringify(this.props.config, function (key, value) {//create string of json but if it detects function it uses toString()
            return (typeof value === 'function') ? value.toString() : value;
        });


        config = JSON.parse(config)
        let concatHTML = `${this.state.init}${flattenObject(config)}${this.state.end}`;

        console.log('HighChartHTML: ' + concatHTML);
        return (
            <View style={this.props.style}>
                <WebView
                    onLayout={this.reRenderWebView}
                    style={styles.full}
                    source={{ html: concatHTML }}
                    javaScriptEnabled={true}
                    domStorageEnabled={true}
                    scalesPageToFit={true}
                    scrollEnabled={false}
                    automaticallyAdjustContentInsets={true}
                    {...this.props}
                />
            </View>
        );
    };
};

var flattenObject = function (obj, str = '{') {
    Object.keys(obj).forEach(function (key) {
        str += `${key}: ${flattenText(obj[key])}, `
    })
    return `${str.slice(0, str.length - 2)}}`
};

var flattenText = function (item, key) {
    if (key == "y") console.log(item, typeof item);
    var str = ''
    if (item && typeof item === 'object' && item.length == undefined) {
        str += flattenObject(item)
    } else if (item && typeof item === 'object' && item.length !== undefined) {
        str += '['
        item.forEach(function (k2) {
            str += `${flattenText(k2)}, `
        })
        if (item.length > 0) str = str.slice(0, str.length - 2)
        str += ']'
    } else if (typeof item === 'string' && item.slice(0, 8) === 'function') {
        str += `${item}`
    } else if (typeof item === 'string') {
        str += `\"${item.replace(/"/g, '\\"')}\"`
    } else {
        str += `${item}`
    }
    return str
};

var styles = StyleSheet.create({
    full: {
        flex: 1,
        backgroundColor: 'transparent'
    }
});

module.exports = ChartWeb;

`

我的配置是从以下链接复制的：https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-drilldown/

用作：

`

return (
      <ChartView style={{ height: 300 }}
        config={conf}
        options={options}
        javaScriptEnabled={true}
        domStorageEnabled={true}>
        </ChartView>
    ); 

`

您可以在此链接https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-drilldown/中看到预期的结果

但是实际情况是，当我单击任何列时，模拟器中仅显示工具提示，而在Chrome中，向下钻取不起作用。

任何帮助将不胜感激。

在React-Native中不会在Highchart中进行深入钻探

0 个答案: