Highcharts带有db值的堆积条形图（动态数据）

Question

我需要带有db值的堆积条形图。所以价值观是动态的。这是我的方案， 系统中有很多用户，但到目前为止只有2个用户处于活动状态。 peter使用task1和task3，而sam使用了task1，task2和task3。每个任务都有打开，待定，取消状态。所以对于彼得我想要显示2个堆叠的条状状态和相同的3个堆叠条形图。我无法在highcharts中实现这一目标。图片表示如下。

 $(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中是一件棘手的事情。

使其工作的一种方法是处理您的数据，使其如下所示：

var fetchData  = function(){
    $.ajax({
        url: "chkProfile.php",
        type: "POST",
        data:
        {
        },
        dataType: "JSON",
        success: function (jsonStr)
        {
        }
    });
}

fetchData();

setInterval(function(){
   var second = parseInt((new Date().getTime() / 1000) % 60);
    if(second === 0) {
       fetchData();
      }
},1000);

现场演示： http://jsfiddle.net/kkulig/2rbpp7wq/

每列都是一个单独的系列。相同任务的系列链接在一​​起（ 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' }] }, (...) ）。 linkedTo用于正确定位它们（​​这些值应该取决于一个类别中的列数，并且应该自动计算）。

pointPlacement需要像这样手动定位：

stackLabes