如何在堆积列高图中显示总额外数据

Question

我有一个堆积列，显示John和Joe吃过的某些水果的数量。除了水果的数量之外，我还想表明他们的水果消费的成本是多少。就我而言，我现在可以显示约翰或乔吃过的每种水果的数量（例如约翰以100美元吃了5个苹果，而乔以60美元吃了3个苹果）。但是，我还想显示每个水果的总成本（对于苹果，总消费量是8个苹果，价值160美元）。有没有办法可以做到这一点？

你可以看到我在这里前期工作：http://jsfiddle.net/SpzBa/

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Stacked column chart' 
     }, 
     xAxis: { 
      categories: ['Apples', 'Oranges', 'Pears'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Total fruit consumption' 
      }, 
      stackLabels: { 
       enabled: true, 
       style: { 
        fontWeight: 'bold', 
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
       } 
      } 
     }, 
     legend: { 
      align: 'right', 
      x: -70, 
      verticalAlign: 'top', 
      y: 20, 
      floating: true, 
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
      borderColor: '#CCC', 
      borderWidth: 1, 
      shadow: false 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>'+ this.x +'</b><br/>'+ 
        this.series.name +': '+ this.y + ' (<b>$ ' + this.point.Amount +') <br/>'+ 
        'Total: '+ this.point.stackTotal; 
      } 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal', 
       dataLabels: { 
        enabled: true, 
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
        style: { 
         textShadow: '0 0 3px black, 0 0 3px black' 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'John', 
      data: [{y: 5, Amount: 100}, {y: 3, Amount: 60}, {y: 4, Amount: 80}] 
     }, { 
      name: 'Joe', 
      data: [{y: 3, Amount: 60}, {y: 4, Amount: 80}, {y: 4, Amount: 80}] 
     }] 
    }); 
}); 

sample output http://57fe73bf7b181243cedb-b8c91974e8361932eb0600d0df360924.r68.cf4.rackcdn.com/Untitled.png

是否可以显示每个水果消费的总额是多少？请将鼠标悬停在列上时将总量放在“总计”标签旁边。防爆。在图中，“总数：8（$ 160）”。

非常感谢！

Answer 1

这是有点圆的房子，但你可以得到所有系列与this.series.chart.series阵列，并且每个系列有一个点阵列，您可以使用您当前的this.point.x作为索引，因此通过迭代所有系列，您可以计算您的Amount属性的总数。

tooltip: { 
    formatter: function() { 
     var allSeries = this.series.chart.series; 
     var totalAmount = 0; 
     for(var s in allSeries) { totalAmount += allSeries[s].points[this.point.x].Amount; } 

     return '<b>'+ this.x +'</b><br/>'+ 
      this.series.name +': '+ this.y + ' (<b>$ ' + this.point.Amount +') <br/>'+ 
      'Total: '+ this.point.stackTotal + ' (<b>$ ' + totalAmount +')'; 
    } 
} 

http://jsfiddle.net/SpzBa/1/