Как добавить ссылки в подсказку Highcharts, которая открывается в браузере мобильного телефона?

Question

Я разрабатываю приложение React Native с выставкой.Один из экранов содержит графику, созданную с помощью Highcharts.У всех точек есть подсказка с некоторым текстом, к которому я хотел бы добавить ссылку, которая открывала бы 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>

Регистрация Ссылка внутри подсказки Highcharts Я видел интересные идеи, такие как добавлениеэта информация внутри ключа charts:

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

, который работает, но открывает ссылку внутри ChartView React Native.То есть пространство с графиком показывает данный URL.Однако я хочу, чтобы URL открывался в браузере.

Можно ли открыть ссылки в браузере?React Native Linking.openURL(url); - это способ сделать это, но я не вижу, как я могу использовать Linking.openURL в настройках config.

Answer 1

Я решил это с помощью onMessage из CharView:

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():

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.