浮动多条形图

Question

使用flot？

的多个柱形图的任何示例代码

类似于this example。给定的修补文件对我不起作用。我可以在任何地方下载多条形图的最新文件。

更新

我确信Flot是一个非常好的库，但是插件/附加组件不容易获得，网站上给出的示例非常基础，所以我决定使用jqPlot代替

Answer 1

更新信息：Andión的回答引用了这个库。 Bars-side-by-side

您可以在此处下载代码： http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js

结果是：

Answer 2

您是否尝试过orderBars插件？

您可以下载代码here

Answer 3

您必须将每个条形视为自己的数据系列，因此如果您看到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  );

}）;

Answer 4

仔细检查您在X轴（条形系列）上传入的值。

每个栏不需要不同的系列，那就是......过度。

您需要的是针对每个颜色的不同系列（或者更确切地说，您希望在图表中使用的每组不同的渲染设置）。

我意识到你已经开始了，但是如果你想发布给你带来问题的代码，它可能对其他人有所帮助。 flot网站上的例子很简单，所以它可能只是一些简单的东西（比如你的X轴值，如果它们没有被定义）就会绊倒你。

我在生产系统中使用flot来渲染三个不同的条形系列（红色，黄色和绿色条），所以它听起来像是一个非常类似的解决方案。