我想渲染一个只有两个事实的非常简单的水平堆叠条。没有任何轴。
像这样：我的目标。
但我唯一能做的就是：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);
}
);
});