【问题标题】:Highcharts - advanced tooltip functionality neededHighcharts - 需要高级工具提示功能
【发布时间】:2011-08-26 19:02:56
【问题描述】:

在使用具有堆叠法线的面积图进行绘图时遇到问题。我在这里问的最后一个问题是:Highcharts help - Area chart stacking

这基本上是在询问如何在不标准化数据的情况下将值绘制到堆栈中。有人告诉我,我可以从另一个系列中减去一个系列以使图表正确显示,但是,由于此计算,悬停时的值会出现偏差。

示例: 之前:

Series Total:      [0,0,0,1,1,2,3]
Series In-Service: [0,0,0,0,0,1,2]

所以我修复了数据来绘制它:

Series Total:      [0,0,0,1,1,1,1]
Series In-Service: [0,0,0,0,0,1,2]

现在图表很好,但工具提示错误,例如最后一个数据点应该是:

Series Total:      3
Series In-Service: 2

但它显示:

Series Total:      1
Series In-Service: 2

而且由于工具提示无法访问其他点,我们无法进行修复计算来显示它。除非我使用 shared: true,但我不能使用 shared,因为工具提示太大了,因为我拥有的所有系列。

如果我不清楚,请提出任何问题,我真的需要一些帮助。

【问题讨论】:

    标签: javascript jquery graph charts highcharts


    【解决方案1】:

    设置系列数据时使用对象列表。您可以向数据点对象添加其他选项并从工具提示格式化程序访问它。

    有关示例,请参阅 http://jsfiddle.net/jgdreyes/JvSBk/

    var seriesTotal = [
        {x: 0, y: 0, customTooltip: 0},
        {x: 1, y: 0, customTooltip: 0},
        {x: 2, y: 0, customTooltip: 0},
        {x: 3, y: 1, customTooltip: 1},
        {x: 4, y: 1, customTooltip: 1},
        {x: 5, y: 1, customTooltip: 2},
        {x: 6, y: 1, customTooltip: 3}
    ];
    
    var chart = new Highcharts.Chart({
    
        series: [
            {data: seriesTotal}
        ],
    
        tooltip: {
            formatter: function() {
                //access customTooltip option
                return this.point.customTooltip;
            }
        },
    });
    

    【讨论】:

      【解决方案2】:

      虽然可能不是最优的,但我在类似情况下做了以下操作:

      在我的配置中,我设置了工具提示格式化程序以使用点名称。

      tooltip: {
        formatter: function() {
          return this.point.name;
        }
      }
      

      然后当我添加点时,我只需使用我的自定义 HTML 设置名称...

      // get x, y and other vars
      series[0].addPoint({x: x, y: y, name: 'In Service: ' + inService }, false);
      series[1].addPoint({x: x, y: y, name: 'Total: ' + total }, false);
      

      当然你会使用未调整的值作为总数。

      【讨论】:

      • 我已经考虑过了,感谢 sn-ps,但我有 16 个系列,每个系列 100 分,计算 x 和 y 超出了我的技能水平。还有其他想法吗?
      • 我正在为一个有近 10,000 个点的散点图做这样的事情。它的效果出奇的好。至于计算xy,您不必逐字逐句地以像素或任何东西计算它们。在一个简单的情况下,您只需将x 设置为数组的索引,并将y 设置为数组的值。
      猜你喜欢
      • 2022-07-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-28
      • 1970-01-01
      • 1970-01-01
      • 2014-03-04
      • 1970-01-01
      相关资源
      最近更新 更多