javascript - 与 Flot 进行多栏聊天

Question

使用 flot 的多条图表的任何示例代码？

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

更新

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

Answer 1

更新信息： Andión 的回答引用了这个库。酒吧并排

你可以在这里下载代码： http ://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js

结果是：

Answer 2

您是否尝试过orderBars插件？

你可以在这里下载代码

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 来渲染三个不同的条形系列（红色、黄色和绿色条形），因此这听起来像是您尝试做的非常相似的解决方案。