使用highcharts绘制图表，如何在tooltip里显示服务器端的其余数据

首先，仔细阅读API中tooltip的farmatter属性。

API例子中对应代码以下：

tooltip: {
            formatter: function () {
                return 'The value for <b>' + this.x +
                    '</b> is <b>' + this.y + '</b>';
            }
        },

能够看到其中this.x,this.y是变量，分别对应数据点横轴和纵轴的坐标。

想到highcharts的图表数据源都是经过json对象传递给Series对象，去查看API中Series的接口以下：

显然tooltip的数据显示是根据Series里的x，y变量来动态显示的。

猜测若是将传递给Series的json对象中增长自定义的属性 myattr: myvalue，而后在tooltip中使用this.myattr来获取，也许能够实现将后台数据传递到图标显示。

测试代码以下：

js中定义以下：

$(function () {
    $('#container').highcharts({
        tooltip: {
             formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': y ' + this.y + ' % <br/>' +
                    'myattr: ' + this.total ;
            }
        },
        series: [{name:'mytest', data:[{y:20, myattr: 14}, {y:30, myattr: 15}, {y:40, myattr: 16}]}]
    });
});

在最后显示的图表中能够很清楚的看到，tooltip里包含了两种数据，y和myattr

其中，myattr的信息就是咱们想要在图表上展现，可是并非x轴和y轴信息的数据。

ps：myattr须要用的话可能须要修改控件源码。能够用如下一些直接用：

formatter: Function
中/英 | 有更好的翻译？
回调函数将格式化提示框中的文本。返回false将为一个特定的点禁用提示框。
一个HTML的子集是被支持的。提示框中的HTML被解析和转换为SVG，所以这不是一个完整的HTML渲染器。下列的标签是被支持的：<b>,<strong>, <i>, <em>, <br/>, <span>.标签直接的内容能够被样式style属性设置样式。可是仅限于文字相关的text-related的CSS样式。
自从2.1版本以来，提示框可以在多个系列之间经过共享选项来共享。在格式化的可用数据中区别一个字节取决于提示框是不是共享的或者不是共享的。在一个shared提示框中，除X之外的全部属性，通常全部的点都被保存在一个数组中，this.points
可用的数据有：
this.percentage (not shared) / this.points[i].percentage (shared)
仅限于堆叠系列和饼图系列。全部点的百分比。
this.point (not shared) / this.points[i].point (shared)
关键的对象。若是被定义，关键的名称是可以经过this.point.name表示。
this.points
在一个共享的提示框中，这是一个包含每一个点的所有属性的数组。
this.series (not shared) / this.points[i].series (shared)
系列对象。这个系列的名称可经过this.series.name.显示
this.total (not shared) / this.points[i].total (shared)
仅限于堆叠系列。表示所有在X轴上的值。
this.x
X轴上的值。这个属性一样不care提示框是共享的仍是不共享的。
this.y (not shared) / this.points[i].y (shared)
Y轴上的值。

highcharts中文API： http://www.hcharts.cn/api/index.php#tooltip