在 HIGHCHARTS 中动态设置工具提示答案

【问题标题】：Set tooltip dynamically in HIGHCHARTS在 HIGHCHARTS 中动态设置工具提示
【发布时间】：2018-12-31 08:28:48
【问题描述】：

我在我的应用程序中使用 Highcharts。在这里，我面临一个问题，例如，

我的 x 轴列表是，

var peMList = ["EM", "UF", "WT"];

我的对象喜欢，

var mapObj = {};
mapObj["EM"]="Element_Missing";
mapObj["UF"]="Unknown_Format";
mapObj["WT"]="Wrong_Type";

我的图表格式如，

tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>'+mapObj['{point.key}'],
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}% </b><br/>',
        shared: true
    }

如何在图表工具提示中添加对象值。 我已经添加了，但是显示未定义。

任何帮助将不胜感激。

【问题讨论】：

你能根据你的尝试创建一个 jsfiddle 吗？

标签： javascript highcharts react-highcharts

【解决方案1】：

你必须使用formatter函数：

tooltip: {
    formatter: function() {
        return '<span style="font-size:10px">' + this.points[0].key + '</span><table>' + mapObj[this.points[0].key] + '</table><br/>' + '<span style="color:' + this.points[0].series.color + '">' + this.points[0].series.name + '</span>: <b>' + this.points[0].y + '% </b>'
    },
    shared: true
}

现场演示：http://jsfiddle.net/BlackLabel/jvg0fk7y/

API 参考：https://api.highcharts.com/highcharts/tooltip.formatter

【讨论】：