如何使用highcharts库在react-native中打开工具提示中的链接

时间:2019-04-26 06:18:00

标签: javascript react-native highcharts

我将react-native与“ react-native-highcharts”库(1.0.2)一起使用。我需要打开工具提示中的链接。

在工具提示中,我有一个链接,我需要在浏览器中使用本机<a href="https://www.google.es/">Open link</a>打开它。

import React, { Component } from "react";
import { View, ScrollView, Text, Image, ActivityIndicator, StyleSheet, Linking, Platform } from "react-native";
import ChartView from 'react-native-highcharts';
import { url_charts } from "../utils/config";


export default class ChartScreen extends Component {
    constructor(props){
        super(props);
        this.state = {
            series: [],
            isLoading: false
        }
    }

    async componentDidMount(){
        this.setState({isLoading: true, series: []});
        await this.load_chart();
        this.setState({isLoading: false});
    }

    load_chart = async () => {
        // Load the series and points from the endpoint
        let url = `${url_charts}?parameters`;
        await fetch(url, { method: "GET" })
        .then((response) => response.json())
        .then((response) => {
            let series = [];
            // Get the data
            // ...
            this.setState({ series: series});
        })
        .catch((error) => {
            // Catch the error if occur
        });
    };

    render(){
        let Highcharts = "Highcharts";
        let config = {
            chart: {
                type: "line",
                animation: Highcharts.svg,
                borderRadius: 10,
                marginTop: 40,
                marginBottom: 30,
                marginRight: 20,
                marginLeft: 50,
                zoomType: "xy",
                panning: true,
                resetZoomButton: {
                    position: {
                        x: 0,
                        y: -30
                    },
                    theme: {
                        style: {
                            width: 'auto',
                            fontSize: 10
                        }
                    }
                }
            },
            title: "",
            xAxis: {
                type: "datetime",
                tickPixelInterval: 60
            },
            yAxis: {
                title: "",
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: "#808080"
                }],
                tickPixelInterval: 60
            },
            plotOptions: {
                series: {
                    stickyTracking: false,
                },
            },
            tooltip: {
                followTouchMove: false,
                useHTML: true,
                style: {
                pointerEvents: 'auto'
                },
                backgroundColor: "#FFF",
                borderRadius: 20,
                formatter: function () {
                    let extras = this.point.extras;
                    if(extras.name === undefined) {
                        this.tooltip.hide();
                    }

                    return `<div>
                                <!-- Example to open https://www.google.es/ on click a link -->
                                <a href="#" onclick="Linking.openURL('https://www.google.es/')">open google</a>
                                <!-- End example-->
                            </div>`;
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: this.state.series,
            credits: {
                enabled: false
            }
        };

        const options = {
            global: {
                useUTC: true
            },
            lang: {
                decimalPoint: ",",
                thousandsSep: "."
            }
        };

        return (
            <View style={styles.graph}>
                    <ChartView
                        style={styles.high_charts}
                        originWhitelist={['']}
                        config={config}
                        options={options}
                    />
            </View>
        )
    }
}

预期结果是,当我单击工具提示的链接时,将打开带有URL https://www.google.es/的浏览器。


0 个答案:

没有答案