海图-绘制折线图与汇总值，但显示分手悬停

I am using Highcharts - Line - Ajax. Let's say I have two series of data - 'Headcount 1' and 'Headcount 2'. I want to draw a line graph of 'Headcount', which is the sum of the 2 series. However, when someone hovers on one data point, I want to show the individual values in the callout. Is this possible? How can I do this?

我使用的是Highcharts - Line - Ajax。假设我有两个数据系列——“人数统计1”和“人数统计2”。我想画一个折线图，它是两个级数的和。然而，当某人停留在一个数据点上时，我希望在callout中显示单个值。这是可能的吗?我该怎么做呢?

e.g.

如。

H1 = (1, 2, 3)
H2 = (5, 6, 7)
Ht = (6, 8, 10)

I will draw a line graph with Ht. If I hover on '6' on the chart, the callout should show the values of H1 = 1 and H2 = 5

用Ht画一条直线。如果我在图表的'6'上停留，标注应该显示H1 = 1和H2 = 5的值

2 个解决方案

#1

You can set the visibility for series H1 and H2 to false,

可以将系列H1和H2的可见性设置为false，

series: [{
        name: 'H1',
        data: [1, 2, 3],
        visible: false,
        showInLegend: false
    }, {
        name: 'H2',
        data: [5, 6, 7],
        visible: false,
        showInLegend: false
    }, {
        name: 'H',
        data: [6, 8, 10]
    }]

and edit tooltip formatter to display what you want

编辑工具提示格式化程序以显示您想要的内容

tooltip: {
      formatter: function() {
          var s = '<b>' + this.x + '</b>';
          var chart = this.points[0].series.chart; //get the chart object
          var categories = chart.xAxis[0].categories; //get the categories array
          var index = 0;
          while(this.x !== categories[index]){index++;} //compute the index of corr y value in each data arrays           
          $.each(chart.series, function(i, series) { //loop through series array
              if (series.name !== 'H') {
                s += '<br/>'+ series.name +': ' +
                    series.data[index].y +'m';  //use index to get the y value
              }
          });  
          return s;
      },
      shared: true
    }

Have a look at jsfiddle.net/s190ebby/27/

看看jsfiddle.net/s190ebby/27/

#2

Yes Points can have custom property, taking care that the names do not shadow highcharts variable names.

Yes点可以具有自定义属性，注意名称不要阴影高图变量名。

var data = [{
    y: 6,
    h1Value: 1,
    h2Value: 5
},{
    y: 8,
    h1Value: 2,
    h2Value: 6
}];

Set your series to this data in your config object, by series: data

将您的系列设置为配置对象中的此数据，按系列:data进行设置

Customise the tooltip as:

定制工具提示为:

tooltip: {
          pointFormat: '<b>H Value</b>: {point.y}<br/>
                        <b>H1 Value</b>: {point.h1Value}<br/>
                        <b>H2 Value</b>: {point.h2Value}'
}

#1