在 HIGHCHARTS 中动态设置工具提示

Question

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

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

任何帮助将不胜感激。

Answer 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

在 HIGHCHARTS 中动态设置工具提示

Set tooltip dynamically in HIGHCHARTS

javascript

highcharts

react-highcharts