Highcharts堆棧列總和正面和負面

Question

我有一個堆疊的柱狀圖，顯示每個月的3個鍵/值堆疊在另一個之上。有些月份可能會有負面影響。目前的功能是爲每個月的高標貼放兩個堆疊的標籤。一個用於積極（頂部），另一個用於底部（底部）。

請參閱下面的代碼和JS小提琴爲例：

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     yAxis: { 
      stackLabels: { 
       enabled: true, 
       align: 'center' 
      } 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal', 
       pointPadding: 0, 
       groupPadding: 0, 
       dataLabels: { 
        enabled: false, 
        color: '#FFFFFF' 
       } 
      } 
     }, 

     series: [{ 
      data: [29.9, -71.5, 106.4, -129.2, 144.0, -176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }, { 
      data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2] 
     }, 
     { 
      data: [55.9, 90.5, 106.4, 350.2, 144.0, 52.0, 130.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 
    }); 
}); 

http://jsfiddle.net/sph1LjtL/

我所需的功能是實際具有一個堆疊標籤，其包括所有的三個值的總和，而不是兩個單獨的標籤。因此，對於二月（在小提琴中），它會在列上方顯示195，因爲266.50 - 71.50 = 195.

我一直在想辦法做到這一點，但一直不成功，因爲highcharts正在處理積極和消極的單獨的圖表。任何幫助，將不勝感激！謝謝。

Answer 1

這可能是一個解決方案，使用函數，並在處理正堆棧時查找負堆棧。代碼：

yAxis: { 
    stackLabels: { 
     formatter: function() { 
      if(this.total >= 0) { 
       if(this.axis.stacks["-column"][this.x] != null) 
        return this.total + this.axis.stacks["-column"][this.x].total; 
       else 
        return this.total; 
      } 
     } 
     // ... 
    } 
} 

請參閱this updated JSFiddle演示如何工作。

Answer 2

這可以通過使用yAxis.stackLabels.formatter並循環瀏覽系列數據項（以及將濾波器應用於應用標籤的軸）來完成。這裏是一個完成的（非常詳細）例如：

yAxis: { 
    stackLabels: { 
    enabled: true, 
    align: 'center', 
    formatter: function() { 
     console.log(this); 
     var theIndex = this.x; 
     var theSeries = this.axis.series; 
     var theSum = 0; 

     for (var i = 0; i < theSeries.length; ++i) { 
     theSum = theSum + theSeries[i].yData[theIndex]; //console.log(theSeries[i].yData[theIndex]); 
     } 
     if (this.isNegative == false) { 
     return theSum; 
     } 
    } 
    } 
}, 

的formatter我收到供以後使用點的指數（x）中挑選出正確的數據點來總結裏面。然後設置循環所有系列項目。最後，我從系列對象中獲取yData點，並將它們彙總爲合適的xAxis索引。下一步是僅將濾波器應用於正軸位置。功能齊全jsFiddle。請注意，您將不得不使用小數精度進行一些工作，我會將其留給您。

Answer 3

在this Link

yAxis: { 
     stackLabels: { 
      enabled: true, 
      align: 'center', 
         formatter: function() { 
       var sum = 0; 
       var series = this.axis.series; 

       for (var i in series) { 
        if (series[i].visible && series[i].options.stacking == 'normal') 
         sum += series[i].yData[this.x]; 
       } 
       if(this.total > 0) { 
        return Highcharts.numberFormat(sum,1); 
       } else { 
        return '';  
       } 
      } 
     } 
    }