Highcharts - arearange - 工具提示中的低值和高值

Question

我有两个系列的highcharts arearange。我理解，如何在工具提示中显示系列名称，但我无法理解如何显示系列“低”，“高”和“值”如：

SERIES_1：480 - 480 SERIES_2：483 - 485 - 'two'

$.each( this.points, function( k, point ) {
echo += point.series.name + ':LOW?? - HIGH?? - VALUE??';
});

示例：http://jsfiddle.net/v6nxtfp5/

完整代码：

$('#chart').highcharts({
  chart: {
    type: 'arearange',
  },
  xAxis: {
    type : 'datetime',
    dateTimeLabelFormats: {
        day: '%d %m %Y'
    },
  },
  tooltip: {
      crosshairs: true,
      shared: true,
      formatter: function() {
        var echo = Highcharts.dateFormat('%d.%m.%Y', new Date(this.x))   +'<br>';

        $.each( this.points, function( k, point ) {
            echo += point.series.name + ':LOW?? - HIGH?? - VALUE??';
        });

        return  echo;
      },
  },
  series:
  [
    { 
      "name":"SERIES_1",
      "data":[
        {"x":1548979200000,"low":477,"high":477,"value":477},
        {"x":1551398400000,"low":480,"high":480,"value":480},
        {"x":1554076800000,"low":480,"high":480,"value":480}
      ]
    },
    { 
      "name":"SERIES_2",
      "data":[
        {"x":1546300800000,"low":478,"high":478,"value":478},
        {"x":1548979200000,"low":478,"high":478,"value":478}, 
        {"x":1551398400000,"low":478,"high":480,"value":"two"},                          
        {"x":1554076800000,"low":483,"high":485,"value":"two"}
      ]
    }
  ],
});

Answer 1

您可以使用point.point访问该点本身，然后您可以格式化工具提示：

tooltip: {
  crosshairs: true,
  shared: true,
  useHTML:true, // to use <br> tag 
  formatter: function() {
    var echo = Highcharts.dateFormat('%d.%m.%Y', new Date(this.x))   +'<br>';

    $.each( this.points, function( k, point ) {
        echo += point.series.name +'| Low : ' + point.point.low + ' | High : '+ point.point.high + '| Value :' + point.point.value + '<br>';
    });

    return  echo;
  },
}

Fiddle

PS：你链接的小提琴只是基本的Jquery演示