访问highcharts工具提示中链接内的变量

q1qsirdb 于 2022-11-10 发布在 Highcharts

关注(0)|答案(2)|浏览(174)

我正在向highcharts工具提示中添加一个链接，我需要在链接中添加变量{point.key}，但我无法访问它。当我将它从标记中取出时，我可以很好地访问它。
有问题的代码行：

`<a href="/events/discover?${chart.aggregation}={point.key}"/>View</a>`,

整个程式码片段：

options.series = allSeriesState.map((seriesState) => {
            return {
                seriesId: seriesState.seriesId,
                name: seriesState.name,
                tooltip: {
                    headerFormat: `<table><tr><th>${chart.xTitle}: {point.key:%Y-%m-%d}</th></tr>`,
                    pointFormat:
                        `<tr><td><b>{point.y} </b><span style="color: {series.color}">{series.name}</span> Events</td></tr>` +
                        `<tr><td><a href="/admin/portfolio/miniApp/events/discover?event_type={series.name}&index=${seriesState.index}&timeFrame=${chart.timeFrame}&${chart.aggregation}={point.key}"/>View in Discover</a></td></tr>`,
                    footerFormat: '</table>'},
                type: seriesState.type,
                color: seriesState.color,
                data: seriesState.color && seriesState.type ? allSeriesData?.[seriesState.seriesId] || [] : []
            }
        });

highcharts

来源：https://stackoverflow.com/questions/72608725/access-variable-inside-of-a-link-inside-of-highcharts-tooltip

2条答案

按热度按时间

pdtvr36n1#

pointFormat不支持多个嵌套级别。请使用pointFormatter函数，该函数具有更大的灵活性。

pointFormatter() {
  let point = this;
  return `<a href="https://en.wikipedia.org/wiki/${point.category}" target="_blank">${point.category}</a>`
}

演示：https://jsfiddle.net/BlackLabel/oqvh8yx1/
API参考：

https://api.highcharts.com/highcharts/tooltip.pointFormat
https://api.highcharts.com/highcharts/tooltip.pointFormatter

赞(0）回复(0）举报 2022-11-10

bhmjp9jg2#

从该点添加属性的唯一解决方案是创建一个自定义工具提示组件，如下所示：

tooltip: {
                formatter() {
                    return ReactDOMServer.renderToString(<CustomTooltip {...this} chart={chart} />);
                },

组成部分：

import React, {ReactElement} from "react";
import {capitalizeFirstLetter} from "../../../../components/Defaults";

export default function CustomTooltip(props: any): ReactElement {
    console.log(props)
    let title
    let xAxis = JSON.stringify(props.x)
    let agg
    if(props.chart.panelType === "aggs_chart"){
        title = props.chart.xTitle
        agg = '&' + props.series.userOptions.aggregation + '=' + props.point.category
    } else {
        title = capitalizeFirstLetter(props.chart.timeInterval) + " " + "of"
        agg = ''
    }
    return (
        <div>
            <h4><b>{title}:</b> {xAxis}</h4>
            <h4><b>{props.y} </b><span style={{color: props.color}}>{props.series.userOptions.name}</span><b> Events</b></h4>
            <h4><a href={'/admin/portfolio/miniApp/events/discover?event_type=' + props.series.userOptions.name + '&index=' + props.series.userOptions.index + '&timeFrame=' + props.chart.timeFrame + agg}>View in Discover</a></h4>
        </div>
    );
};

赞(0）回复(0）举报 2022-11-10

我来回答

访问highcharts工具提示中链接内的变量

2条答案

相关问题

热门标签

最新问答