javascript 与 Flot 的多栏聊天
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3572829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multi bar chat with Flot
提问by user431514
Any sample code for chart with multiple bars using flot ??
使用 flot 的多条图表的任何示例代码?
similar to this example. The given patched files are not working for me. Anywhere I can download the latest files for multi bar graph.
类似于这个例子。给定的修补文件对我不起作用。我可以在任何地方下载多条形图的最新文件。
Update
更新
I am sure Flot is a very good library but plugins/add-ons are not available easily and the examples given on the website are very basic, so I decided to use jqPlotinstead
我相信海军报是一个很好的库,但插件/加载项不可轻易和网站上给出的例子是非常基本的,所以我决定用jqPlot代替
回答by pmking
Updated Info:Andión's answer makes reference to this library. Bars-side-by-side
更新信息:Andión 的回答引用了这个库。并排的酒吧
You can download the code here: http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js
你可以在这里下载代码:http: //www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js
The result is :

结果是:

回答by Andión
回答by Gene
You have to treat each bar as its own data series, so if you see 11 bars you need to create 11 data series.
您必须将每个条形视为其自己的数据系列,因此如果您看到 11 个条形,则需要创建 11 个数据系列。
Here's sample code for 2 bars.
这是 2 条的示例代码。
<script id="source" language="javascript" type="text/javascript">
$(function () {
var d1 =[0, 2];
var d2 =[1,3];
var startData = [
{ //first series
label:"d1",
data: [d1],
bars:{
show: true,
fill: true,
fillColor: "red"
}
},
{ //second series
label:"d2",
data: [d2],
bars:{
show: true,
fill: true,
fillColor: "blue"
}
}
];
var option={
series: {
bars:{
show: true,
fill: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: { ticks: 5 }
};
$.plot($("#placeholder"),startData,option );
});
});
回答by Peter Bernier
Double-check the values that you're passing in on the X-axis (of your bar series).
仔细检查您在 X 轴(您的条形系列)上传递的值。
You don't need a different series for each bar, that would be.... excessive.
您不需要为每个酒吧使用不同的系列,那会......过多。
What you do need is a different series for each colourof bar (or more accurately, each different set of rendering settings that you'd like to have in your chart).
您需要的是针对每种颜色的条形(或者更准确地说,您希望在图表中具有的每组不同的渲染设置)的不同系列。
I realize you've moved on, but if you want to post the code that was giving you issues, it might help other people. The examples on the flot site are pretty straight-forward, so it may have just been something simple (like your X-axis value if they weren't defined) that was tripping you up.
我意识到你已经继续前进了,但是如果你想发布给你带来问题的代码,它可能会帮助其他人。浮点网站上的示例非常简单,因此可能只是一些简单的事情(例如未定义的 X 轴值)让您绊倒。
I'm using flot in a production system to render three different bar series (red, yellow and green bars) so it sounds like a very similar solution what you're trying to do.
我在生产系统中使用 flot 来渲染三个不同的条形系列(红色、黄色和绿色条形),所以这听起来像你想要做的一个非常相似的解决方案。

