Question

我有两个系列的高图区域。我了解工具提示中显示节目名称的方式，但是我不明白如何显示节目“低”，“高”和“值”，例如：

SERIES_1 ：480-480
SERIES_2 ：483-485-“两个”

$.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演示

高图-区域范围-工具提示中的低值和高值

1 个答案: