如何在将在移动设备浏览器上打开的 Highcharts 工具提示中添加链接?

2024-03-19

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

基本上,应用程序代码如下所示:

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>

Checkin Highcharts 工具提示内的链接 https://stackoverflow.com/q/22427025/1983854我看到了有趣的想法,例如在charts key:

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

这有效,但它打开了内部的链接ChartView反应本机。也就是说,带有图形的空间显示给定的 URL。但是,我希望该 URL 在浏览器中打开。

有没有办法在浏览器中打开链接? React Native 的Linking.openURL(url);是这样做的方法,但我不知道我该如何Linking.openURL从内部config设置。


我通过使用解决了它onMessage从字符视图:

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

这会触发此方法打开 URL:

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

URL 通过全局变量填充window.myURL并发送消息postMessage() https://developer.mozilla.org/en-US/docs/Web/API/Window/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 上则不然。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在将在移动设备浏览器上打开的 Highcharts 工具提示中添加链接? 的相关文章

随机推荐