使用jQuery Flot設置2條間隔空間

Question

如何設置2條間距？我想每個月並排2個酒吧。

JavaScript代碼

var data3 = [ 
    [gd(2014, 1, 1), 800], [gd(2014, 2, 2), 500], [gd(2014, 3, 3), 600], [gd(2014, 4, 4), 700], 
    [gd(2014, 5, 5), 500], [gd(2014, 6, 6), 456], [gd(2014, 7, 7), 800], [gd(2014, 8, 8), 589], 
    [gd(2014, 9, 9), 467], [gd(2014, 10, 10), 876], [gd(2014, 11, 11), 689], [gd(2014, 12, 12), 700] 
]; 

    var data2 = [ 
     [gd(2014, 1, 1), 700], [gd(2014, 2, 2), 300], [gd(2014, 3, 3), 400], [gd(2014, 4, 4), 200], 
     [gd(2014, 5, 5), 200], [gd(2014, 6, 6), 100], [gd(2014, 7, 7), 500], [gd(2014, 8, 8), 400], 
     [gd(2014, 9, 9), 300], [gd(2014, 10, 10), 400], [gd(2014, 11, 11), 200], [gd(2014, 12, 12), 300] 
    ];  

    var dataset = [ 
     { 
      label: "Receber", 
      data: data3, 
      color: "#1ab394", 
      bars: { 
       show: true, 
       align: "center", 
       barWidth: 999999999, 
       lineWidth: 1 
      } 
     }, 
     { 
      label: "Pagar", 
      data: data2, 
      color: "#464f88", 
      bars: { 
       lineWidth: 1, 
       show: true, 
       fill: true, 
       barWidth: 999999999 
      }, 
     } 
    ]; 
var options = { 
      xaxis: { 
       mode: "time", 
       tickSize: [1, "month"], 
       tickLength: 0, 
       axisLabel: "Date", 
       axisLabelUseCanvas: true, 
       axisLabelFontSizePixels: 12, 
       axisLabelFontFamily: 'Arial', 
       axisLabelPadding: 10, 
       color: "#838383",     
       timeformat: "%b/%y" 
      }, 
      yaxes: [{ 
       position: "left", 
       max: 1070, 
       color: "#838383", 
       axisLabelUseCanvas: true, 
       axisLabelFontSizePixels: 12, 
       axisLabelFontFamily: 'Arial', 
       axisLabelPadding: 3 
      }, { 
       position: "right", 
       clolor: "#838383", 
       axisLabelUseCanvas: true, 
       axisLabelFontSizePixels: 12, 
       axisLabelFontFamily: ' Arial', 
       axisLabelPadding: 67 
      } 
      ], 
      legend: { 
       noColumns: 1, 
       labelBoxBorderColor: "#000000", 
       position: "nw" 
      }, 
      grid: { 
       hoverable: true, // Usa o plugin "jquery.flot.tooltip" para quando passar o mouse sob os pontos do grafico 
       borderWidth: 0, 
       color: '#838383', 
       clickable: true 

      }, 
      tooltip: true 
     }; 

function gd(year, month, day) { 
      return new Date(year, month - 1, day).getTime(); 
     } 

我的圖表

Answer 1

你看的flot.orderbars插件？它可以讓你通過添加order屬性的bars財產從而將棒來訂購吧彼此相鄰：

var dataset = [{ 
    label: "Receber", 
    data: data3, 
    color: "#1ab394", 
    bars: { 
     show: true, 
     lineWidth: 1, 
     barWidth: 60 * 60 * 24 * 1000 * 7, //set the barWidth to 7 days 
     order: 1 
    } 
}, { 
    label: "Pagar", 
    data: data2, 
    color: "#464f88", 
    bars: { 
     show: true, 
     lineWidth: 1, 
     barWidth: 60 * 60 * 24 * 1000 * 7, 
     order: 2 
    }, 
}]; 

我創建了一個例子JSFiddle與您的代碼和orderbars插件。