highcharts将多个值传递给工具提示

时间:2012-07-02 13:06:54

标签: javascript tooltip highcharts

我需要在工具提示中显示3个值: 时间,价值和另一个价值(变化)。

我看到了this example(但jsdfiddle无效)。

我试过这个

//each loop..
indice.push(["time", "value1", "value2"]);

,工具提示设置

tooltip:
    {
    useHTML: true,
    formatter: function()
    {
      return '' + Highcharts.dateFormat('%H:%M:%S', this.x) +'; '+ this.y + this.z(<-is this right?);
    }
},

和系列

series:
[{
    type: 'area',
    data: indice
}]

可以帮助吗? thsnks。

5 个答案:

答案 0 :(得分:44)

如果要为x和y值以外的点传递其他数据,则必须为该值命名。在下面的example中,我为每个数据点添加了以下三个附加值:

{
  y: 3,
  locked: 1,
  unlocked: 1,
  potential: 1,
}

然后,要在工具提示中访问并显示这些值,请使用以下命令:

tooltip: 
{
     formatter: function() { return ' ' +
        'Locked: ' + this.point.locked + '<br />' +
        'Unlocked: ' + this.point.unlocked + '<br />' +
        'Potential: ' + this.point.potential;
     }
}

答案 1 :(得分:7)

如果您在多系列Highstocks图表中想要在工具提示中显示系列特定数据,您可以执行以下操作。

var series = [];

// Populate our series
series.push({
  name: "small_cities",
  displayName: "Small Cities",
  color: "#123456",
  data: [...]
});
series.push({
  name: "Countries",
  displayName: "Countries",
  color: "#987654",
  data: [...]
});

chart: {
  ...

  tooltip: {
    formatter: function() {
      var s = '';
      $.each(this.points, function(i, point) {
        s += '<br /><span style="color:' + this.series.color + '">' +
             point.series.userOptions.displayName + '</span>: ' + point.y;
      });
      return s;
    }
  },

  ...
}

现在你会看到很好的系列名称“Small Cities”而不是series.name(small_cities)。您在系列中设置的所有属性都可以在this.points[].series.userOptions中找到。 有关更多格式化程序选项,请查看Highstocks docs

答案 2 :(得分:5)

我弄清楚了, 我在数据数组中传递3个值

indice.push([(new Date(value.x)).getTime(), val_change[0], val_change[1]]);

系列:     [{       类型:'区域',      名称:titleindice,      数据:indice,      showInLegend:false //禁用显示/隐藏图标    }]

并在工具提示中

tooltip:
                {
                    useHTML: true,
                    formatter: function()
                    {
                        var color = "";

                        return Highcharts.dateFormat('%H:%M:%S', this.x) + this.y +  this.point.config[2] ;

                    }
                },

答案 3 :(得分:5)

两种方式。

1

series: [
          { ...
            tooltip:
              {pointFormat: "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y} {y2}</b><br/>"}
          }, ...          
         ]
o = Highcharts.Point.prototype.tooltipFormatter
Highcharts.Point.prototype.tooltipFormatter=function(format){return o.call(this, format).replace("{y2}", this.config[2]);}

2

 a = new Highcharts.StockChart(options); 
 a.series[0].tooltipFormatter = function(item) { return "<span style=\"color:{" + item.series.color+"\">" +item.series.name+"</span>: <b>"+item.y+item.point.config[2]+"</b><br/>"; }

答案 4 :(得分:4)

我试过的是将系列名称与x轴和y轴值连接起来,它对我来说很好。你面临什么问题?

tooltip: { formatter: function () { return this.x + ': ' + this.series.name + ': ' + this.y; } }
相关问题