如何在jQuery flot中将堆栈效果添加到条形图中
我对jquery flot有一个问题 起初我得到了下面的图表 守则如下:如何在jQuery flot中将堆栈效果添加到条形图中,jquery,flot,Jquery,Flot,我对jquery flot有一个问题 起初我得到了下面的图表 守则如下: <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]); //announ
<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>
通过尝试和出错,我发现如果我更改绘图函数,如下所示:
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 },
}
});
然后我得到了以下结果:
钢筋已成功堆叠,但它变得太宽
我希望酒吧只在中心,我怎么能解决这个问题?
非常感谢 嗯,我想这可能是flot中的一个bug。如果每个系列有多个数据点,我认为效果会更好。事实上,我能找到的唯一方法是添加一条“虚拟”线,强制x轴为正确的宽度,并使钢筋保持相同的宽度: 首先,向数据中添加新数据集:
{
data: [[0, 0], [10, 0]],
bars: {
show: false
},
lines: {
show: false
}}
[0,0]
是您的x轴最小值,[10,0]
是您的y轴最小值
然后我稍微更改了绘图选项,因此您的$绘图调用如下所示:
var plot = $.plot(placeholder, data, {
series: {
stack:true,
bars: {
show: true,
barWidth: 1,
fill: 0.5,
align: 'center'
}
}
});
由此产生了这个工作示例:我找到了一个简单的方法来解决我的问题
通过修复以下代码:
//announce a dataset
var data = [{ data: d1, color: "#f21d1d" },{ data: d2, color: "#1d61f2" },{ data: d3, color: "#5bc91a" }];
进入
问题解决了。
产生此工作示例:
谢谢你的每一个回复
//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" }];