添加自定义文本工具提示，该工具提示在Highcharts中的点到点不同

问题描述：

I am trying to develop a chart that displays a custom 'text' tooltip that I can set to change from point to point. Here is my code as of now:

            tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
            },

            series: [{
                name: 'Winter 2007-2008',
                data: [
                    [Date.UTC(1970,  9, 27), 0   ],
                    [Date.UTC(1970, 10, 10), 0.6 ],
                    [Date.UTC(1970, 10, 18), 0.7 ],
                    [Date.UTC(1970, 11,  2), 0.8 ],
                    [Date.UTC(1970, 11,  9), 0.6 ],
                    [Date.UTC(1970, 11, 16), 0.6 ],
                    [Date.UTC(1970, 11, 28), 0.67],
                    [Date.UTC(1971,  0,  1), 0.81]
                ]
            }

Now this works as intended, but I am trying to add an extra bit of text that will appear in the tooltip when hovering over a point. This is my desired input for a data point (although I dont know if I will have to change it for my final product).

 [Date.UTC(1970, 10, 18), 0.7 , 'custom tooltip1'],
 [Date.UTC(1970, 10, 18), 0.7 , 'custom tooltip2'],

I would want the text displayed in a newline below the current tooltip:

current tooltip

Please let me know if you have any suggestions or can point me somewhere I can find some answers.

Thanks!

我正在尝试开发一个显示自定义“文本”工具提示的图表，我可以将其设置为从点更改为点。这是我现在的代码： p>

  tooltip：{
 headerFormat：'＆lt; b＆gt; {series.name}＆lt; / b＆gt;＆lt; br＆gt;'，  
 pointFormat：'{point.x：％e。  ％b}：{point.y：.2f} m'
}，
 
系列：[{
名称：'Winter 2007-2008'，
数据：[
 [Date.UTC（1970）  ，9,27），0]，
 [Date.UTC（1970,10,10），0.6]，
 [Date.UTC（1970,10,18），0.7]，
 [Date.UTC（  1970,11,2），0.8]，
 [Date.UTC（1970,11,9），0.6]，
 [Date.UTC（1970,11,16），0.6]，
 [Date.UTC  （1970,11,28），0.67]，
 [Date.UTC（1971,0,1），0.81] 
] 
} 
  code>  pre> 
 
  现在这可以按预期工作，但我试图添加一些额外的文本，当鼠标悬停在一个点上时将显示在工具提示中。 这是我想要的数据点输入（虽然我不知道是否必须为我的最终产品更改它）。 p> 
 
 
  [Date.UTC（1970,10，  18），0.7，'custom tooltip1']，
 [Date.UTC（1970,10,18），0.7，'custom tooltip2']，
  code>  pre> 
 
  我希望文本显示在当前工具提示下面的换行符中： p> 
 
 
  p> 
 
 
如果您有任何建议或者可以指点我可以找到一些答案，请告诉我。 p> 
 
 
谢谢！ p  > 
  div>

答

Change your data to be something like this:

data: [
   {x: Date.UTC(1970, 10, 18), 
    y: 0.7 ,
    customtooltip: 'custom tooltip1'},
   {x: Date.UTC(1970, 10, 18), 
    y: 0.7 ,
    customtooltip: 'custom tooltip2'}
]

Then in do a tooltip formatter function like this:

tooltip: {
     formatter: function() {
          var dt = new Date(this.x);
          var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
          var dtstr = dt.getDate()+". "+months[dt.getMonth()];
          var tooltip = '<b>'+this.series.name+'</b><br>'+dtstr+': '+this.y+' m<br>'+this.point.options.customtooltip;
          return tooltip;
     }
}

See how that works for you.

添加自定义文本工具提示，该工具提示在Highcharts中的点到点不同

相关推荐