如何将json中的数据显示在HighCharts的tooltip中？

Question

如下效果：

全部代码：http://runjs.cn/code/uqvidqwj

Answer 1

刚才看了下源码，可能我看的不是很清楚，目前我看到的结果是如果不改动源码的话，这个功能貌似不行

源码中有这么一段：

getLabelConfig: function() {
  var point = this;
  return {
     x: point.category,
     y: point.y,
     key: point.name || point.category,
     series: point.series,
     point: point,
     percentage: point.percentage,
     total: point.total || point.stackTotal
  }
}

所以使用format的时候貌似只能替换这几个值，我暂时没有找到可以设置的地方

series的translate方法中有这几个值的计算方法

Answer 2

tooltip.formatter 函数中可以自定义 tooltip 的显示内容，具体请看 API 和 DEMO：
http://api.highcharts.com/highcharts#tooltip--formatter

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts....

Answer 3

series数据列的data属性写成[{y:10,extra:name}]形式，extra为额外的变量，然后用this.point.extra访问。

tooltip:{
        formatter: function () {
                return 'extra:<b>' + this.point.extra + '</b><br>数量:<b>'+this.y + '</b>';
         }
    }

Answer 4

         ................
                data: [
                    {
                        x:xValue,
                        y:yRatio,
                        id:'id_'+ i,
                        myData:toolTipContents,
                        events:{
                            mouseOver:function(event){
                                //alert("mouseover");
                                //console.log(this);
                                //console.log(this.options.myData);
                                //chart.get('highest');
                            }
                        }
                    }],

.....
                    tooltip: {
                        shared: true,
                        useHTML: true,
                        headerFormat: '<b>'+specDateTimeStr+'{series.name}</b><br><table>',
                        pointFormat: '{point.options.myData}',
                        footerFormat: '</table>'
                    },

toolTipContents 可以使用HTML格式

Answer 5

不用改源码可以实现，通过this.point.index可以返回 当前点的在数组中的下标，然后通过下标获取json中对应的quality的值；

Answer 6

formatter: function () {
                    let strHtml = '<table>';
                    this.points.forEach(el => {
                      strHtml += `<tr><td style="color: ${el.series.color};font-weight: bold">${el.series.name}: </td><td style="text-align: right"><b>${el.point.name} ${el.point.y}</tr><td></td></tr>`
                    });
                    strHtml += '</table>';
                    return strHtml
                  },

遇到这个问题，完成了给个参考
数据：[

data: [{y: 2, name: 'a'}, {y: 2, name: 'abc'}, {y: 18, name: 'a21'}]},
data: [{y: 21, name: 'aasa'}, {y: 32, name: 'sabc'}, {y: 12, name: 'a21'}]}

]

部分的代码，可以做到很好的自定义了