如何在将在移动设备的浏览器中打开的Highcharts工具提示中添加链接? [英] How can I add links in a Highcharts tooltip that will open on mobile's browser?

问题描述

我正在用expo开发一个React Native应用程序.其中一个屏幕包含使用Highcharts创建的图形.所有点都具有关联的 tooltip 和一些文本，我想向其添加一个链接，该链接将在浏览器中(即应用程序外部)打开URL.

I am developing a React Native app with expo. One of the screens contains a graphic created with Highcharts. All points have an associated tooltip with some text, to which I would like to add a link that would open the URL in the browser (that is, outside the app).

基本上，应用程序代码如下:

Very basically, the app code looks like this:

import ChartView from 'react-native-highcharts';


render() {
        let Highcharts = "Highcharts";
        let config ={
            chart: {
                type: "line",
                animation: Highcharts.svg,
            ...
            tooltip: {
                followTouchMove: false,
                useHTML: true,
                formatter: function () {
                    return `<div class="text">bla bla bla
                                <a href="http://www.google.cat">my link here/a>
                            </div>`;
                }
            },
        };

将其渲染为:

    return(
    <View style={styles.container}>
        <ChartView
            config={config}
        />
    </View>

签入 Highcharts工具提示中的链接我看到了一些有趣的想法，例如在charts键中添加以下信息:

Checkin Link inside of a Highcharts tooltip I saw interesting ideas like adding this info inside the charts key:

    events: {
        click: function (event) {
            var url = 'http://www.google.cat';
            window.open(url, '_blank');
        }
    }

可以使用，但是会在React Native的ChartView中打开链接.也就是说，图表中的空格显示了给定的URL.但是，我希望在浏览器中打开URL.

Which works, but it opens the link inside the ChartView of React Native. That is, the space with the graph shows the given URL. However, I want the URL to open in the browser.

是否可以在浏览器中打开链接? React Native的Linking.openURL(url);是这样做的方法，但是我看不到如何从config设置中获取Linking.openURL.

Is there a way to open the links in the browser? React Native's Linking.openURL(url); is the way to do so, but I cannot see how can I bing Linking.openURL from within the config settings.

推荐答案

我通过使用CharView中的onMessage解决了该问题:

I solved it by using onMessage from the CharView:

return(
<View style={styles.container}>
    <ChartView
        onMessage={m => this.onMessage(m)}
        config={config}
    />
</View>

这触发此方法打开URL:

This triggers this method to open the URL:

onMessage = (m) => {
    let data = JSON.parse(m.nativeEvent.data);
    Linking.openURL(data.url)
};

然后通过全局变量window.myURL填充URL，并使用 postMessage() :

And the URL gets populated through a global variable window.myURL and sending the message with postMessage():

render() {
    let Highcharts = "Highcharts";
    let config ={
        ...
        plotOptions: {
            series: {
                stickyTracking: false,
                point: {
                    events: {
                        click: function(e) {
                            window.postMessage(JSON.stringify({'url': window.myUrl}));
                        }
                    }
                }
            },
        },
        tooltip: {
            useHTML: true,
            formatter: function () {
                window.myUrl = extras.url;
                return `<div class="text">bla bla bla
                            <a href="http://www.google.cat">my link here/a>
                        </div>`;
            }
    };

它在iOS上运行良好，但在Android上却无法运行.

It works well on iOS, but not in Android.

这篇关于如何在将在移动设备的浏览器中打开的Highcharts工具提示中添加链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！