highcharts在工具提示中显示其他自定义数据

时间:2014-06-05 11:42:54

标签: javascript highcharts

我想在我的highcharts的工具提示中添加信息(我已经尝试了其他类似的问题,但没有解决我的问题......)。

我希望将(jj.mm.aaaa)作为xAxis中每个数据的标签。但是在我的工具提示中,我希望将工具提示标题,日期和另一个未在图表中呈现的信息作为:(jj.mm.aaaa) = n items

例如,我有这个xAxis数据:

chartOptions.xAxis = {
categories: ['23.01.2014', '24.01.2014', '25.01.2014']
};

这是我想要的xAxis标签,但在我想要的工具提示中:

------------------------   ------------------------   ------------------------
- 23.01.2014 = 5 items -   - 24.01.2014 = 3 items -   - 25.01.2014 = 4 items -
------------------------   ------------------------   ------------------------

我尝试向xAxis对象添加一个选项,如下所示:

chartOptions.xAxis = {
   categories: ['23.01.2014', '24.01.2014', '25.01.2014'],
   nbItems: [5,3,4]
};

但是这将输出每个元素的数组的所有单元格:

----------------------------   ----------------------------   ----------------------------
- 23.01.2014 = 5,3,4 items -   - 24.01.2014 = 5,3,4 items -   - 25.01.2014 = 5,3,4 items -
----------------------------   ----------------------------   ----------------------------

有没有办法只拥有相应的nb项目?

这是帮助您理解我的问题的小提琴:http://jsfiddle.net/upE3T/1/

1 个答案:

答案 0 :(得分:2)

我设法使用自定义工具提示格式化程序功能执行类似于您想要的操作。

chartOptions.xAxis = {
        categories: ['23.01.2014', '24.01.2014', '25.01.2014'],
        nbItems: {"23.01.2014":5,'24.01.2014':3,'25.01.2014':4}
    };

...

chartOptions.tooltip = {      
         formatter: function() {
            var s = '<b>'+ this.x + ' (' + chartOptions.xAxis.nbItems[this.x] + ')</b>';

            $.each(this.points, function(i, point) {
                s += '<br/>'+ point.series.name +': '+
                    point.y +'m';
            });

            return s;
        },
        shared: true,
        useHTML: false
    };

http://jsfiddle.net/c8CaB/

不太理想,因为您不再拥有完整的HTML支持,但您仍然可以使用HTML的子集(http://api.highcharts.com/highcharts#tooltip.formatter)设置输出样式。