[英]Flot Bar Chart multiple series issue
I've been using Flot charts for a short period of time and I need to display a bar chart with one or two series depending on the selection: 我已经使用了Flot图表了很短的时间,并且需要根据选择显示一个或两个系列的条形图:
if (lC2 != 'None') {
values = [
{ label: lC1, data: arrC1, color: cC1 },
{ label: lC2, data: arrC2, color: cC2 }
];
bWidth = 0.15;
}
else {
values = [{ data: arrC1, color: cC1 }];
bWidth = 0.3;
}
and my function that draws the chart is: 我绘制图表的函数是:
function BarChartH(id, data, ticksl) {
$.plot(id, data, {
series:{
bars: {
show: true,
barWidth: bWidth,
order: 1,
horizontal: true
}
},
grid: {
hoverable: true
, align: "center"
//,horizontal: true
},
legend: {
show: true
}
, yaxis: { ticks: ticksl }
});
}
But when it needs to display both series ( lC2 != 'None'
) it appears only the second one (the bars become stacked). 但是,当需要显示两个序列时( lC2 != 'None'
),它仅显示第二个序列(条形图堆叠在一起)。
The thing is that if I remove 'order:1' from the function and add the order for each data like: 问题是,如果我从函数中删除“ order:1”并为每个数据添加顺序,例如:
values.push({ label: lC1, bars: { order:1 }, data: arrC1, color: cC1 });
values.push({ label: lC2, bars: { order:2 }, data: arrC2, color: cC2 });
OR 要么
values = [
{ label: lC1, bars: { order:1 }, data: arrC1, color: cC1 },
{ label: lC2, bars: { order:2 }, data: arrC2, color: cC2 }];
it displays both of the series but with a lot of space between the bars and when there are many they overlap (the lC2 bar from the first Y label overlaps with the lC1 bar from the second Y label like in the attached image). 它显示了这两个系列,但是在条形图之间有很大的空间,并且在它们之间有很多重叠(如左图所示,第一个Y标签的lC2条与第二个Y标签的lC1条重叠)。
I need to get both the bars of the same Y label closer to make a difference between them, but I don't know what am I doing wrong. 我需要使同一Y标签的两个条形更接近,以使它们之间有所不同,但我不知道我在做什么错。
you have to use this plugin orderBars ... check this fiddle i used the orderBars plugin for that ... also you can increase the value of bWidth
to decrease the space between bars. 您必须使用此插件orderBars ...检查此小提琴,我为此使用了orderBars插件...也可以增加bWidth
的值以减少小节之间的空间。
also here is what i did: 这也是我所做的:
var arrC1 = [[7,5], [3,4],[4,3],[6,2],[4,1]];
var arrC2 = [[2,5], [1,4],[0,3],[5,2],[4,1]];
var ticksl = [[5, "Five"], [4, "Four"], [3, "Three"], [2,"Two"], [1,"One"]];
var data = [{bars:{order:1},data: arrC1,color: 'red'},
{bars:{order:2},data: arrC2,color: 'green'}];
var bWidth=0.43;
$.plot($('#Chart'), data, {
series: {
bars: {
show:true,
lineWidth: 1,
barWidth: bWidth,
order: 1,
horizontal: true
}
},
grid: {
align: "center"
},
legend: {
show: true
},
yaxis:{
ticks: ticksl,
autoscaleMargin: 0.8
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.