Flot：水平堆积条 - 删除不必要的填充

Question

jQuery: 1.10.1
浮动: 0.7, 0.8
JSFiddle: http://jsfiddle.net/26gbkyb9/4/

出于某种原因，我似乎无法摆脱单杠上的填充（白色 space 在网格内部，但在条形外部）。如果你查看上面的 JSFiddle link，你会发现问题不存在于垂直条上，所以我只能假设它是一个错误。但是，我想知道是否有人有我可以应用的修复程序。我已经通过 Flot Reference on GitHub 挖掘，但没有任何运气。编辑：我应该注意到填充只随着图表高度的增加而增加。

输出图像：

代码：

<script>
var datahorz = [
    {label: 'Compliant', data: [[90,1]]},
    {label: 'Noncompliant', data: [[10,1]]},
];          
var ticks = [[0, "0%"], [10, "10%"], [20, "20%"], [30, "30%"], [40, "40%"], [50, "50%"], [60, "60%"], [70, "70%"], [80, "80%"], [90, "90%"], [100, "100%"]]
var optionshorz = {
    series: {stack: 1,
             lines: {show: false, steps: false },
             bars: {show: true, align: 'center'},},
    bars: {horizontal: true, lineWidth: 0},
    yaxis: {show: false},
    xaxis: {ticks: ticks, tickSize: 100},
    legend: {show: false}, 
    grid: {borderWidth: 1}
};

$(document).ready(function() {
    $.plot($("#flot-placeholder30DayHorz"), datahorz, optionshorz);
});
</script>
<div id="flot-placeholder30DayHorz" style="width:600px;height:100px;margin:20px;"></div>

感谢任何建议的变通方法。

Answer 1

Plot 自动将水平图表上 y 轴的最小值和最大值更改为 0.48 ... 1.52 而不是 0.5 ... 1.5（我不知道为什么）。

如果您像这样在 optionshorz 中指定最小值和最大值

yaxis: {
    show: false,
    min: 0.5,
    max: 1.5
},

您得到的图表没有填充。查看更新后的 fiddle.

Btw：竖图顶部的padding也是一样的。这里最大值设置为 102 而不是 100.

Answer 2

除了显式设置 min/max 值，您还可以将轴 autoscaleMargin 选项设置为 null 以防止应用额外的填充：

yaxis: {
    /* other options */
    autoscaleMargin: null
},

这将允许图表 min/max 值仍然随数据集自动缩放，但不添加空格。

Flot：水平堆积条 - 删除不必要的填充

Flot: Horizontal Stacked Bar - Remove Unnecessary Padding

jquery

flot