Question

我遇到了jquery flot的问题

起初我得到了下面的图表 http://design2u.me/blog/example/bar/index.html

代码如下：

<script type="text/javascript">
$(function () {
    // generate a dataset
        var d1 = []; d1.push([3,100]);
        var d2 = []; d2.push([3,66]);
        var d3 = []; d3.push([3,33]);

        //announce a dataset
        var data = [{ data: d1, color: "#f21d1d" },{ data: d2, color: "#1d61f2" },{ data: d3, color: "#5bc91a" }];      
        var placeholder = $("#placeholder");

        // plot it
        var plot = $.plot(placeholder, data, {
                stack:true,
                bars: { show: true, barWidth: 4, fill: 0.5 },
                xaxis: { ticks: [], autoscaleMargin: 0.02 , min: 0, max: 10  },
                yaxis: { min: 0, max: 120 },
        });
});
</script>

但是，我需要堆叠不同的部分，我已经添加了属性

stack:true,

通过尝试和错误，我发现如果我改变绘图功能如下：

var plot = $.plot(placeholder, data, {
            series: {
                stack:true,
                bars: { show: true, barWidth: 4, fill: 0.5 },
                xaxis: { ticks: [], autoscaleMargin: 0.02 , min: 0, max: 10  },
                yaxis: { min: 0, max: 120 },
            }
        });

然后我得到了以下结果：http://design2u.me/blog/example/bar/index2.html

酒吧已经成功堆叠，但它变得太宽了......

我希望只在中心的酒吧，我该如何解决这个问题？非常感谢！

Answer 1

嗯，我认为这可能是flot中的一个错误。如果每个系列有多个数据点，我认为它会更好用。事实上，我唯一可以弄清楚如何做到这一点的方法是添加一条“虚拟”线来强制x轴为正确的宽度，并使条形也保持相同的宽度：

首先，为您的数据添加新数据集：

{
data: [[0, 0], [10, 0]],
bars: {
    show: false
},
lines: {
    show: false
}}

[0,0]是您的x轴最小值，[10,0]是您的y轴最小值。

然后我稍微改变了你的情节选项，所以你的$.plot电话看起来像这样：

var plot = $.plot(placeholder, data, {
    series: {
        stack:true,
        bars: {
            show: true,
            barWidth: 1,
            fill: 0.5,
            align: 'center'
        }
    }
});

导致此工作示例：http://jsfiddle.net/ryleyb/92v2h/

Answer 2

我找到了解决问题的简单方法。

通过修复以下代码：

//announce a dataset
        var data = [{ data: d1, color: "#f21d1d" },{ data: d2, color: "#1d61f2" },{ data: d3, color: "#5bc91a" }];

到

//announce a dataset
        var data = [{ stack: true, data: d1, color: "#f21d1d" },{ stack: true, data: d2, color: "#1d61f2" },{ stack: true, data: d3, color: "#5bc91a" }];

问题解决了。在此工作中进行了解释，例如：http://jsfiddle.net/divaka/q8srK/

感谢您的回复。

如何将堆栈效果添加到jQuery flot中的条形图

2 个答案: