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

Похоже padMin: 0 установки на Xaxis является причиной второй серии, которые будут отображаться некорректно. Если вы удалите это вообще, он работает так, как вы хотите.

Что касается удаления линии сетки клещей, попробуйте добавить это к axesDefaults настройки

tickOptions: { 
    markSize: 0, 
} 

Так это будет выглядеть следующим образом:

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

Если он не работает с просто , попробуйте использовать canvasAxisTickRenderer, более подробно здесь: http://www.jqplot.com/tests/rotated-tick-labels.php