如何在Highchart中的每列下方显示工具提示数据？ [英] How to show tooltip data below each column in Highchart?

问题描述

当我将鼠标悬停在它上方时，工具提示有一些数据，例如在x标签所在的列下面显示的数据，现在它显示0,1,2，所以在highchart中的工具提示数据是可见的

我使用图表来比较时间段，所以在每一列我想从工具提示添加数据。这可能是我比较每列下面的2个日期，一张照片会对你有所帮助，但我不是一个值得信任的计算器用户。

解决方案

使用 datetime xAxis 类型：

小提琴：

• 
  
  

  另外一个使用类别的版本：
  
  

  
  

  • 
    
    

    这也可能是分组分类插件的一种情况： .highcharts.com / plugin-registry / single / 11 / Grouped-Categoriesrel =nofollow noreferrer> http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories

  
  
  
  

  The tooltip data in highchart is visible when i hover my mouse over it, the tooltip has some data that i want to show for example below the column where the x label is, for now it shows 0,1,2 and so on.

  I am using the chart to compare timeperiods, so under each column i want to add data from the tooltip. It could be 2 dates I compare below each column, a picture would be helpful for you but i am not a trusted stackoverflow user yet.

  解决方案

  An example using a datetime xAxis type:

  Fiddle:

  • http://jsfiddle.net/jlbriggs/1bs6vL3t/

  Code:

  In the xAxis properties, specify the type as datetime:

  xAxis: {
    type: 'datetime'
  },
  

  In the series, specify your x values as dates (using either the Date.UTC() method, or by directly specifing epoch time)

  series: [{
    data: [
      [Date.UTC(2016, 05, 6), 3],
      [Date.UTC(2016, 05, 13), 5],
      [Date.UTC(2016, 05, 20), 4],
      [Date.UTC(2016, 05, 27), 7],
      [Date.UTC(2016, 06, 4), 6],
      [Date.UTC(2016, 06, 11), 9],
      [Date.UTC(2016, 06, 18), 7],
      [Date.UTC(2016, 06, 25), 5]
    ]
  }]
  

  Output:

  And, an alternative version that uses categories instead:

  • http://jsfiddle.net/jlbriggs/1bs6vL3t/2/

  Generally, when working with time series data, using datetime is preferable. There may be cases where various circumstances make it less effective, in which case categories can be a useful alternative.

  {{ Edit }} After re-reading your comments, here's another version, using categories, that might be more like what you're looking for:

  • http://jsfiddle.net/jlbriggs/1bs6vL3t/5/

  This may also be a case for the Grouped Categories plugin:

  • http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories

  这篇关于如何在Highchart中的每列下方显示工具提示数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！