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

Question

我正在向我的 highcharts 工具提示添加一个链接，我需要将变量 {point.key} 添加到链接内，但我无法访问它。当我将其从标签中取出时，我可以正常访问它。

Answer 1

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

Answer 2

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

            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>
    );
};