highcharts在工具提示中显示其他自定义数据 [英] highcharts show additional custom data in tooltip

问题描述

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

我希望有一天（jj.mm.aaaa）作为我xAxis中每个数据的标签。但在我的工具提示中，我希望具有作为工具提示标题，日期以及未在图表中显示的其他信息：（jj.mm.aaaa）= n项

例如，我有这个xAxis数据：

  chartOptions。 xAxis = {
 categories：['23 .01.2014'，'24 .01.2014'，'25 .01.2014'] 
}; 
  

这就是我想要的xAxis标签，但是在我想要的工具提示中：

  ------------------------ ----- ------------------- ------------------------ 
  -  23.01。 2014 = 5项 -   -  24.01.2014 = 3项 -   -  25.01.2014 = 4项 -  
 ------------------------  - ----------------------- ------------------------ 
  

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

  chartOptions.xAxis = {
 categories：['23 .01.2014'，'24 .01.2014'，'25 .01.2014']，
 nbItems： [5,3,4] 
}; 
  

但是这会为每个元素输出数组的所有单元格：

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

有没有一种方法只有相应的项目数量？

这里有一个小工具来帮助你理解我的问题： http://jsfiddle.net/upE3T/1/

解决方案

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

  chartOptions.xAxis = {
 categories：['23 .01.2014'，'24 .01.2014'，'25 .01.2014']，
 nbItems：{23.01.2014：5，'24 .01 0.2014' ：3，'25 0.0 1.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; 
}，
共享：true，
 useHTML：false 
}; 
  

http://jsfiddle.net/c8CaB/

不理想，因为您不再拥有完整的html支持，但仍然可以使用样式输出HTML的一个子集（ http://api.highcharts.com/highcharts#tooltip.formatter）。

I want to add informations in the tooltip of my highcharts (I already tried the other similar questions about this, but none solved my problem...).

I want to have the day (jj.mm.aaaa) as the label of each data in my xAxis. But in my tooltip, I want to have as the tooltip title, the date AND another information that is not rendered in the chart : (jj.mm.aaaa) = n items

For example, I have this xAxis data :

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

that's the label I want for my xAxis, but in my tooltips I want to have :

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

I tried to add an option to the xAxis object like this :

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

but this will output all cell of the array for each element :

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

Is there a way to have only the corresponding nb of item ?

Here is a fiddle to help you understand my problem : http://jsfiddle.net/upE3T/1/

解决方案

I managed to do something similar to what you want using the custom tooltip formatter function.

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/

Not ideal, as you no longer have full html support, but you can still style the output using a subset of HTML (http://api.highcharts.com/highcharts#tooltip.formatter).

这篇关于highcharts在工具提示中显示其他自定义数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！