JQplot - 僅有兩個事實的堆積橫條

Question

我想渲染一個非常簡單的水平堆疊條，只有兩個事實。沒有任何軸。

像這樣：My target。

但我唯一能做的就是：My actuell Version。

問題是，當我只插入兩個值（例如「2」和「7」）時，它只顯示了一個「7」的條。第二個問題是左邊的刻度線。不知道如何解決這個問題。有任何想法嗎 ？

我的代碼：

$(document).ready(function(){ 

var s1 = [2]; 
var s2 = [7]; 
var s3 = [10]; 

plot3 = $.jqplot('chart1', [s1, s2, s3], { 
// Tell the plot to stack the bars. 
stackSeries: true, 
captureRightClick: true, 
seriesDefaults:{ 
    renderer:$.jqplot.BarRenderer, 
    rendererOptions: { 
    barDirection: 'horizontal', 
     // Put a 30 pixel margin between bars. 
     // barMargin: 30, 
     // Highlight bars when mouse button pressed. 
     // Disables default highlighting on mouse over. 
     highlightMouseDown: true 
    }, 
    pointLabels: {show: true} 
}, 
axes: { 
    yaxis: { 

    renderer: $.jqplot.CategoryAxisRenderer, 

    }, 
    xaxis: { 
    // Don't pad out the bottom of the data range. By default, 
    // axes scaled as if data extended 10% above and below the 
    // actual range to prevent data points right on grid boundaries. 
    // Don't want to do that here. 
    padMin: 0, 
    //max: 15, 

    } 
}, 
axesDefaults:{   
     showTicks: false,   
     showTickMarks: false, 

     }, 
legend: { 
    show: false, 
    location: 'e', 
    placement: 'outside' 
}, 
grid:{ 
     drawGridlines: false, 
     borderWidth: 0, 
     shadow: false, 
     background:'#ffffff', 
     gridLineColor: '#FFFFFF', 
     }, 
}); 
// Bind a listener to the "jqplotDataClick" event. Here, simply change 
// the text of the info3 element to show what series and ponit were 
// clicked along with the data for that point. 
$('#chart3').bind('jqplotDataClick', 
function (ev, seriesIndex, pointIndex, data) { 
    $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data); 
} 
); 
}); 

Answer 1

它看起來像在x軸的padMin: 0設置導致無法正確顯示的第二個系列。如果你完全刪除它，它可以按你的想法工作。

作爲去除網格線蜱，嘗試添加該到axesDefaults設置

tickOptions: { 
    markSize: 0, 
} 

所以現在這個樣子：

axesDefaults:{   
     showTicks: false,  
     showTickMarks: false, 
     tickOptions: { 
      markSize: 0, 
     } 
}, 

如果它不只是工作，請嘗試使用canvasAxisTickRenderer，更多細節在這裏：http://www.jqplot.com/tests/rotated-tick-labels.php