使用flot?
的多个柱形图的任何示例代码类似于this example。给定的修补文件对我不起作用。我可以在任何地方下载多条形图的最新文件。
更新
我确信Flot是一个非常好的库,但是插件/附加组件不容易获得,网站上给出的示例非常基础,所以我决定使用jqPlot代替
答案 0 :(得分:9)
更新信息:Andión的回答引用了这个库。 Bars-side-by-side
您可以在此处下载代码: http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js
结果是:
答案 1 :(得分:5)
答案 2 :(得分:1)
您必须将每个条形视为自己的数据系列,因此如果您看到11个条形,则需要创建11个数据系列。
以下是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 );
});
答案 3 :(得分:0)
仔细检查您在X轴(条形系列)上传入的值。
每个栏不需要不同的系列,那就是......过度。
您需要的是针对每个颜色的不同系列(或者更确切地说,您希望在图表中使用的每组不同的渲染设置)。
我意识到你已经开始了,但是如果你想发布给你带来问题的代码,它可能对其他人有所帮助。 flot网站上的例子很简单,所以它可能只是一些简单的东西(比如你的X轴值,如果它们没有被定义)就会绊倒你。
我在生产系统中使用flot来渲染三个不同的条形系列(红色,黄色和绿色条),所以它听起来像是一个非常类似的解决方案。