高架图-用求和值绘制线图，但在悬停时显示解体。

Question

我用的是高图集--行- Ajax。假设我有两组数据--“人数1”和“人数2”。我想画一个‘人数’的线状图，这是2系列的总和。但是，当有人在一个数据点上徘徊时，我希望在标注中显示单个值。这个是可能的吗？我该怎么做？

例如：

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

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

Answer 1

可以将系列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]
    }]

并编辑工具提示格式化程序以显示所需内容。

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
    }

看看Jsfiddle.net/s190/27/

Answer 2

是的点可以有自定义属性，注意名称不隐藏高海图变量名。

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

通过series: data将您的系列设置为配置对象中的此数据

将工具提示自定义为：

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