2016-01-13 57 views
0

的每個類別參考YDATA我有一個柱形圖,其顯示兩個系列,具有用於數年的數據。如何從另一系列在highcharts柱形圖

每年都有每個兩個系列的一列。

我想創建一個數據標籤,這些列,顯示了兩列的每一年的價值(YDATA的總和)的總和的百分比。爲此,我需要引用當前y值和給定類別(年)中兩個y值的總和。

我已經試過這樣的事情:

dataLabels:{ 
    enabled:true, 
    formatter:function(e) { 
     var mychart = $('#e_74').highcharts(); 
     var sum = parseInt(mychart .series[1].yData, 10) + parseInt(mychart .series[0].yData, 10); 
     var pcnt = (this.y/sum * 100); 
     return Highcharts.numberFormat(pcnt) + '%';      
    } 
} 

問題:

這適用於第一年/類別,因爲YDATA的總和永遠是第一位的總和這兩個系列的元素 - 所以它在第一年是正確的。然而,隨後的幾年仍然會參考前兩個要素的總和 - 使後續的數據標籤不準確。

我如何可以參考YDATA的電流總和各個類別?

提前感謝您的時間。

這是我的工作進展情況的jsfiddle

這裏是完整的代碼,我想實現這個圖

$(function() {   
    $('#e_74').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     credits: { 
     enabled: false 
     }, 
     noData: { 
      style: { 
       fontWeight: 'bold', 
       fontSize: '20px' 
      } 
     }, 
     title: { 
      text: 'Title', 
     }, 
     navigation: { 
      buttonOptions: 
      { 
       enabled: false 
      } 
     }, 
     xAxis: { 
       categories: [2013, 2014] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Number ' 
      } 
     }, 
     tooltip: { 
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
       '<td style="padding:0"><b>{point.y:,.0f} </b></td></tr>', 
      footerFormat: '</table>', 
      shared: true, 
      useHTML: true 
     }, 
     plotOptions: { 
      column: { 
       pointPadding: 0, 
       borderWidth: 0 
       }, 
      series: { 
      dataLabels:{ 
        enabled:true, 
        formatter:function(e) { 
         var mychart = $('#e_74').highcharts();  
         var sum = parseInt(mychart.series[1].yData[1], 10) + parseInt(mychart.series[0].yData[1], 10); 
         var pcnt = (this.y/sum * 100); 
         return Highcharts.numberFormat(pcnt) + '%'; 
        } 
       } 
       } 
      }, 
      series: [{showInLegend: true, name: 'With trained HW', data: [94426, 147615]}, {showInLegend: true, name: 'Without trained HW', data: [16863, 29198]}] 
     }); 
    }); 
+0

更新答案與更高效的例子 – jlbriggs

回答

1

你需要得到的x索引的副本爲了引用正確的類別。

如果你這樣做有一個循環,你可以把它的動態,以便它與任意數量的系列作品:

formatter:function() { 
    var i = this.point.index; 
    var sum = 0; 
    $.each(this.series.chart.series, function() { 
    sum += this.yData[i]; 
    }) 
    var pcnt = (this.y/sum * 100); 
    return Highcharts.numberFormat(pcnt) + '%'; 
} 

例子:

例額外系列:

OTOH,這種冗餘計算總數,這可能是一個問題,如果你有大量的數據點。

這可能是值得的構建圖,並與每個數據點作爲一個可選變量從所述數據標籤代替引用沿着發送適當的百分比值之前計算相關值。

EDIT -------------------

實施例該前處理的數據,並使用一個「總計」陣列來計算每個百分比扎,從而避免了相同的總計爲每個條重複計算: