在HIGHCHARTS中动态设置工具提示

时间:2018-12-31 08:28:49

标签: javascript highcharts react-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
    }

如何在图表工具提示中添加对象值。 我已经添加了,但是显示的内容不确定。

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

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