Question

如何将下图中显示的工具提示显示为共享？

您可能需要查看Highcharts API参考（特别是有关共享选项的信息）：http://api.highcharts.com/highcharts#tooltip.formatter

这里是jsfiddle：http://jsfiddle.net/iginisruber/Ltqnab9x/1/

全屏：http://jsfiddle.net/iginisruber/Ltqnab9x/1/embedded/result/

我尝试了这个，但它没有工作：

＆＃13;

tooltip: {
			shared: true,
			formatter: function () {
				var y_value_kwh = (this.points[i].y/1000).toFixed(2);
                return '<span style="font-size: 10px">' + this.key + '</span><br/>' + '<span style="color:' + this.points[i].series.color + '">\u25CF</span> ' + this.points[i].series.name + ': <b>' + y_value_kwh  + ' kWh</b><br/>';
            },
        },

＆＃13;

当前代码：

＆＃13;

tooltip: {
			//shared: true,
			formatter: function () {
				var y_value_kwh = (this.y/1000).toFixed(2);
                return '<span style="font-size: 10px">' + this.key + '</span><br/>' + '<span style="color:' + this.series.color + '">\u25CF</span> ' + this.series.name + ': <b>' + y_value_kwh  + ' kWh</b><br/>';
            },
        },

＆＃13;

当前输出：

enter image description here

Answer 1

如果要使用共享工具提示显示堆叠图形的各个数据点，则必须循环显示各个点并构建工具提示标记。

    tooltip: {
        shared: true,
        formatter: function () {
            var points = this.points;
            var pointsLength = points.length;
            var tooltipMarkup = pointsLength ? '<span style="font-size: 10px">' + points[0].key + '</span><br/>' : '';
            var index;
            var y_value_kwh;

            for(index = 0; index < pointsLength; index += 1) {
              y_value_kwh = (points[index].y/1000).toFixed(2);

              tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + y_value_kwh  + ' kWh</b><br/>';
            }

            return tooltipMarkup;
        }
    }

以下是一个工作示例：http://jsbin.com/qatufetiva/1/edit?js,output

Highcharts：共享工具提示格式化this.points [i]

1 个答案: