为高脚椅

Question

我正在尝试像这样做一些范围折线图http://jsfiddle.net/uazvokx4/。

$(function () {

  var ranges1 = [
    [1246406400000, 14.3, 27.7],
    [1246492800000, 14.5, 27.8],
    [1246579200000, 15.5, 29.6],
    [1246665600000, 16.7, 30.7],
    [1246752000000, 16.5, 25.0],
    [1246838400000, 17.8, 25.7],
    [1246924800000, 13.5, 24.8],
    [1247011200000, 10.5, 21.4],
    [1247097600000, 9.2, 23.8],
    [1247184000000, 11.6, 21.8]
    ],
  averages1 = [
    [1246406400000, 21.5],
    [1246492800000, 22.1],
    [1246579200000, 23],
    [1246665600000, 23.8],
    [1246752000000, 21.4],
    [1246838400000, 21.3],
    [1246924800000, 18.3],
    [1247011200000, 15.4],
    [1247097600000, 16.4],
    [1247184000000, 17.7]
    ],
  ranges2 = [
    [1246406400000, 16.3, 28.7],
    [1246492800000, 16.5, 27.1],
    [1246579200000, 17.5, 26.6],
    [1246665600000, 18.7, 28.7],
    [1246752000000, 20.5, 30.0],
    [1246838400000, 19.8, 31.7],
    [1246924800000, 15.5, 27.8],
    [1247011200000, 12.5, 26.4],
    [1247097600000, 13.2, 28.8],
    [1247184000000, 11.6, 25.8]
    ],
  averages2 = [
    [1246406400000, 25.5],
    [1246492800000, 23.1],
    [1246579200000, 22],
    [1246665600000, 26.8],
    [1246752000000, 27.4],
    [1246838400000, 28.3],
    [1246924800000, 22.3],
    [1247011200000, 23.4],
    [1247097600000, 21.4],
    [1247184000000, 18.7]
    ];


  $('#container').highcharts({

    title: {
      text: 'July temperatures'
    },

    xAxis: {
      type: 'datetime'
    },

    yAxis: {
      title: {
        text: null
      }
    },

    tooltip: {
      crosshairs: true,
      shared: true,
      valueSuffix: '°C'
    },

    legend: {
    },

    series: [{
      name: 'Temperature',
      data: averages1,
      zIndex: 1,
      marker: {
        fillColor: 'white',
        lineWidth: 2,
        lineColor: Highcharts.getOptions().colors[0]
      }
    }, {
      name: 'Range',
      data: ranges1,
      type: 'arearange',
      lineWidth: 0,
      linkedTo: ':previous',
      color: Highcharts.getOptions().colors[0],
      fillOpacity: 0.3,
      zIndex: 0
    },{
      name: 'Temperature2',
      data: averages2,
      zIndex: 1,
      marker: {
        fillColor: 'white',
        lineWidth: 2,
        lineColor: Highcharts.getOptions().colors[1]
      }
    }, {
      name: 'Range2',
      data: ranges2,
      type: 'arearange',
      lineWidth: 0,
      linkedTo: ':previous',
      color: Highcharts.getOptions().colors[1],
      fillOpacity: 0.3,
      zIndex: 0
    }]
  });
});

我目前已将工具提示设置为使用共享数据，但它显示所有系列。我想知道是否有一种方法可以链接线和范围，所以我只能显示该对而不是图表中的所有系列。

Answer 1

您可以使用tooltip.formatter来自定义弹出窗口的内容。在内部函数中，您可以使用循环来查找相关系列等。

Answer 2

我会通过在您不希望在工具提示中显示的系列中设置enableMouseTracking:false来实现此目的。

示例：

• http://jsfiddle.net/uazvokx4/1/

参考：

• http://api.highcharts.com/highcharts#plotOptions.series.enableMouseTracking

已更新评论

那么，您想要主系列的个别工具提示，但是您想要将相关范围与它们分组？

您需要使用formatter()功能。可能有很多方法可以实现，但我用这个完成了它：

         formatter: function() {
            var ser = this.series.name;
            var i = this.point.index;
            var rangeSer = ser == 'Temperature' ? 1 : 3;
            var range = this.series.chart.series[rangeSer].data[i];
            return    ser + ': '+ this.y + '°C'
                    + '<br/>Range: '+ range.low + '°C' 
                    + ' - ' 
                    + range.high + '°C';

        }

检查您所在的系列，指定相应的范围，然后获取相应的数据点。

示例：

• http://jsfiddle.net/uazvokx4/3/