настройка подсказок для нескольких рядов линейных рядов в highchairs

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 
    }] 
    }); 
}); 

В настоящее время у меня есть набор всплывающих подсказок, чтобы использовать общие данные, однако он показывает для серий ALL. Мне интересно, есть ли способ связать линию и диапазон, чтобы я мог показать только пару, а не все серии в диаграмме.

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/