javascript - float 水平条占图表宽度的 100%

Question

有什么方法可以阻止水平条达到宽度的 100% 吗？

var d1 = [];
for (var i = 0; i <= 10; i += 1)
    d1.push([parseInt(Math.random() * 30),i]);


var d2 = [];
for (var i = 0; i <= 10; i += 1)
    d2.push([parseInt(Math.random() * 30),i]);

var d3 = [];
for (var i = 0; i <= 10; i += 1)
    d3.push([parseInt(Math.random() * 30),i]);

    $.plot($("#placeholder"), [ d1, d2, d3 ], {
        series: {
            stack: true,
            lines: { show:false },
            bars: { show: true, barWidth: 0.6, horizontal:true }
        }
    });

jsfiddle 演示 here

Answer 1

查看xaxis的autoscaleMargin属性:

“autoscaleMargin”有点深奥:它是缩放算法将添加的边距分数，以避免最外面的点最终出现在网格边界上。请注意，仅当未明确设置最小值或最大值时才应用此边距。如果指定了边距，绘图还将把轴端点延伸到最近的整个刻度。 x 轴的默认值为“null”，y 轴的默认值为 0.02，这似乎适合大多数情况。

所以在你的例子中:

        $.plot($("#placeholder"), [ d1, d2, d3 ], {
        xaxis:{autoscaleMargin:0.1},
        series: {
            stack: true,
            lines: { show:false },
            bars: { show: true, barWidth: 0.6, horizontal:true }
        }
    });