使用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