时间戳

首页 > 解决方案 > 在 HIGHCHARTS 中动态设置工具提示

javascript - 在 HIGHCHARTS 中动态设置工具提示

问题描述

我在我的应用程序中使用 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
    }

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

任何帮助将不胜感激。

标签： javascripthighchartsreact-highcharts

解决方案

你必须使用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

推荐阅读