海軍報條形圖設計

Question

我做了這個柱狀圖http://imageshack.com/a/img901/7186/cnOfhh.png，併爲它的代碼是：

//compute & mark average color 
for (var i = 0; i < zdata.length; i++) { 
    if (zdata[i].TargetTime == null) zdata[i].TargetTime = 0; 
    if (zdata[i].TimePlayed == null) zdata[i].TimePlayed = 0; 

    if (zdata[i].TargetTime >= zdata[i].TimePlayed) { 
     zdata[i]['Color'] = 'green'; 
    } else { 
     zdata[i]['Color'] = 'red'; 
    } 
} 
//localsitelist 
var element = { 
    rt: 'D', 
    Id: rid, 
    courselist: clist, 
    selcourseId: selCid, 
    selcourse: selCname, 
    cartlist: wData, 
    selSiteId: lsid, 
    selsite: sitename, 
    dataList: zdata 
}; //, carts: _mVM.availableCarts()}; // 
//if rid exists, is update, else its new 
var found = -1; 
for (var k = 0; k < document.pvm.rapArray().length; k++) { 
    if (document.pvm.rapArray()[k].Id() == rid) { 
     document.pvm.rapArray()[k].update(element); 
     //build chart data 
     var values = []; //, series = Math.floor(Math.random() * 6) + 6; 

     for (var i = 0; i < zdata.length; i++) { 
      values[i] = { 
       data: [ 
        [zdata[i].HoleSequence, zdata[i].TimePlayed] 
       ], 
       color: zdata[i].Color 
      }; 
     } 
     //var data = [{ data: [[0, 1]], color: "red" }, { data: [[1, 2]], color: "yellow" },{ data: [[2, 3]], color: "green" }]; 
     BarChart('#ChartD-Overview' + rid, values); 
     found = 1; 
     break; 
    } 
} 
if (found == -1) { 
    var rvm = new panelViewModel(element); 
    document.pvm.rapArray.push(rvm); 
    //build chart data 
    var values = []; //, series = Math.floor(Math.random() * 6) + 6; 

    for (var i = 0; i < zdata.length; i++) { 
     values[i] = { 
      data: [ 
       [zdata[i].HoleSequence, zdata[i].TimePlayed] 
      ], 
      color: zdata[i].Color 
     }; 
    } 
    BarChart('#ChartD-Overview' + rvm.Id(), values); 
} 

和條形圖功能：

function BarChart(id, data) { 

    $.plot(id, data, { 
     series: { 
      bars: { 
       show: true, 
       barWidth: 0.6, 
       align: "center" 
      } 
     }, 
     stack: true, 
     xaxis: { 
      mode: "categories", 
      tickLength: 0 
     } 
    }); 
} 

的問題是，我不能設法得到這樣的東西https://imageshack.us/i/expGGpOkp，小線應該是zdata[i].TargetTime。我嘗試了一些使用堆疊條形圖的想法，但結果是不同的...我做錯了什麼？任何人都可以幫我提一個建議，以獲得像上一張圖​​片一樣的條形圖嗎？

Answer 1

這裏有點像你的第二張圖片，使用另一個小節數據庫，其中小節的開始和結束是相同的，因此將它們減少爲行，不需要堆疊任何小節，只需給它們正確的y-值（fiddle）：

$(function() { 

    var dataBarsRed = { 
     data: [ 
      [2, 3], ], 
     label: 'Bars in Red', 
     color: 'red' 
    }; 
    var dataBarsGreen = { 
     data: [ 
      [1, 2], 
      [3, 1], 
      [4, 3] 
     ], 
     label: 'Bars in Green', 
     color: 'green' 
    }; 
    var dataLines = { 
     data: [ 
      [1, 3, 3], 
      [2, 3.5, 3.5], 
      [3, 1.5, 1.5], 
      [4, 2.5, 2.5] 
     ], 
     label: 'Lines', 
     color: 'navy', 
     bars: { 
      barWidth: 0.5 
     } 
    }; 

    var plot = $.plot("#placeholder", [dataBarsRed, dataBarsGreen, dataLines], { 
     points: { 
      show: false 
     }, 
     lines: { 
      show: false 
     }, 
     bars: { 
      show: true, 
      align: 'center', 
      barWidth: 0.6 
     }, 
     grid: { 
      hoverable: true, 
      autoHighlight: true 
     }, 
     xaxis: { 
      min: 0, 
      max: 5 
     }, 
     yaxis: { 
      min: 0, 
      max: 5 
     } 
    }); 

});