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

看起来xaxis上的padMin: 0设置导致第二个系列显示不正确。如果你完全删除它可以按你的意愿工作。

至于删除网格线刻度，请尝试将其添加到axesDefaults设置

tickOptions: {
    markSize: 0,
}

所以它现在看起来像这样：

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

如果它不能正常使用，请尝试使用canvasAxisTickRenderer，更多详细信息：http://www.jqplot.com/tests/rotated-tick-labels.php

JQplot - 只有两个事实的堆积水平条

1 个答案: