Highcharts堆積條形圖與分貝值（動態數據）

Question

我需要與分貝值堆疊條形圖。所以價值觀是動態的。這裏是我的場景， 系統中有很多用戶，但只有2個用戶活躍到現在。 peter使用了task1和task3，sam使用了task1，task2和task3。每個任務都有開放，待決，取消狀態。因此，彼得我想顯示2個堆疊的酒吧狀態和相同的3堆積酒吧。我無法在高位圖上實現這一點。圖片顯示如下。

$(function() { 
       $('#container').highcharts({ 
        chart: { 
         type: 'column' 
        }, 
        title: { 
         x: 0, 
         text: null, 
         style: { 
          fontSize: '13px', 
          fontWeight: 'Bold', 
         } 
        }, 

        credits: { 
         enabled: false 
        }, 

        xAxis: { 
         categories: [ 
          'Sam','Peter', 
         ], 
         crosshair: true 
        }, 
        yAxis: [{ 
         min: 0,allowDecimals: false, 
         title: { 
          text: 'Opportunities' 
         } 
        }], 
        tooltip: { 
         headerFormat: '<b> {point.key}</b><br>',//{series.options.stack} : 
         pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}/{point.stackTotal}' 
        }, 
        plotOptions: { 
         column: { 
         stacking: 'normal', 
         depth: 40 
        } 
       }, 
       series: [ 
       {name:'task1',data:[1], stack:'Sam'}, 
       {name:'task1',data:[1], stack:'Peter'},    {name:'task2',data:[0], stack:'Peter'}, 
       {name:'task3',data:[1], stack:'Sam'},{name:'task3',data:[0], stack:'Peter'}] 

      }); 
     }); 

for (int i = 0; i < dtAccMgrs.Rows.Count; i++) 
       { 
        string accMgr = dtAccMgrs.Rows[i]["AccMgr"].ToString(); 
        AccMgrList += "'" + accMgr + "',"; 
        dtData = dtOppr.Select("AccMgr='" + accMgr + "'"); 
        AccMgrDataOpen += "{name:'Open',data:["; 
        AccMgrDataPending += "{name:'Pending',data:["; 
        AccMgrDataCancelled += "{name:'Cancelled',data:["; 

        for (int j = 0; j < dtData.Length; j++) 
        { 
         AccMgrDataOpen += dtData[j]["Oppr_Open"]; 
         AccMgrDataPending += dtData[j]["Oppr_Pending"]; 
         AccMgrDataCancelled += dtData[j]["Oppr_Cancelled"]; 
         string open = dtData[j]["Oppr_Open"].ToString(); 
         int OpprTotal = Int32.Parse(open) + Int32.Parse(dtData[j]["Oppr_Pending"].ToString()) + Int32.Parse(dtData[j]["Oppr_Cancelled"].ToString()); 

        } 
        AccMgrDataOpen += "], stack:'" + accMgr + "'},"; 
        AccMgrDataPending += "], stack:'" + accMgr + "'},"; 
        AccMgrDataCancelled += "], stack:'" + accMgr + "'},"; 
       } 
       AccMgrDataOpen += "]"; AccMgrDataPending += "]"; AccMgrDataCancelled += "]"; AccMgrList += "]"; 
       AccMgrDataOpen = AccMgrDataOpen.Replace(",]", "]"); 
       AccMgrDataPending = AccMgrDataPending.Replace(",]", "]"); 
       AccMgrDataCancelled = AccMgrDataCancelled.Replace(",]", "]"); 

Answer 1

這是一種棘手的事情在Highcharts做。使其工作的

一種方法是處理你的數據，以便它看起來像這樣：

series: [ 
    // Task 1 
    { 
     name: 'Task 1', 
     id: 'task1', 
     stack: 'Task 1 Peter', 
     pointPlacement: -0.1, 
     data: [{ 
     x: 0, 
     status: 'O' 
     }, { 
     x: 0, 
     status: 'C' 
     }] 
    }, { 
     linkedTo: 'task1', 
     stack: 'Task 1 Sam', 
     pointPlacement: -0.2, 
     data: [{ 
     x: 1, 
     status: 'O' 
     }, { 
     x: 1, 
     status: 'P' 
     }, { 
     x: 1, 
     status: 'C' 
     }] 
    }, 
    // Task 2 
    { 
     name: 'Task 2', 
     id: 'task2', 
     stack: 'Task 2 Sam', 
     data: [{ 
     x: 1, 
     status: 'P' 
     }, { 
     x: 1, 
     status: 'C' 
     }] 
    }, 
(...) 

現場演示：http://jsfiddle.net/kkulig/2rbpp7wq/

每一列是一個單獨的系列。連接在一起的系列（linkedTo）。 pointPlacement用於正確定位它們（​​這些值應取決於一個類別中的列數，並應自動計算）。

stackLabes需要手動定位是這樣的：

render: function() { 

    var series = this.series, 
     yAxis = this.yAxis[0], 
     stacks = yAxis.stacks; 

    for (var key in stacks) { 
     var stack = stacks[key]; 
       series.forEach(function(s) { 
     var stack_; 
     for(var key_ in stack) {   
      stack_ = stack[key_]; 
     } 

     if(s.stackKey.substring(6) === stack_.stack) { 
      stack_.label.attr({ 
      x: s.points[0].plotX 
      }); 
     } 
     }); 
    } 
    }