JQplot-只有两个事实的堆叠水平条形图

JQplot - Stacked horizontal bars with only two facts

本文关键字：事实 条形图 水平 两个 JQplot-      更新时间：2023-09-26

我想呈现一个只有两个事实的非常简单的水平堆叠条形图。没有任何轴。

像这样：我的目标。

但我唯一能做的就是：我的实际版本。

问题是，当我只插入两个值（例如"2"answers"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);
}
);
});

看起来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

相关文章：