Javascript 将Flot与orderbars.js和类别中的多个条一起使用_Javascript_Jquery_Graph_Flot

Javascript 将Flot与orderbars.js和类别中的多个条一起使用

javascript jquery graph

Javascript 将Flot与orderbars.js和类别中的多个条一起使用,javascript,jquery,graph,flot,Javascript,Jquery,Graph,Flot,我在使用flot创建多个条时遇到问题。有一个插件可以在这里下载：它可以使每个x类别有多个条形图，如下所示：（参见自定义条形图下）。然而，他的例子有点不同，因为它使用时间函数而不是类别这是我的密码： <!doctype html> <head> <script language="javascript" type="text/javascript" src="/flot/jquery.js"></script> <script langua

我在使用flot创建多个条时遇到问题。有一个插件可以在这里下载：它可以使每个x类别有多个条形图，如下所示：（参见自定义条形图下）。然而，他的例子有点不同，因为它使用时间函数而不是类别

这是我的密码：

<!doctype html>
<head>

<script language="javascript" type="text/javascript" src="/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.js"> </script>
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.categories.js"></script>
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.orderBars.js"></script>


<script type="text/javascript">
    $(document).ready(function () {

        var data1 = [
        {
        label: "Male" ,
        data: [["True", 1],["False", 2]] ,
        bars: {
            show: true,
            barWidth: 0.13,
            order: 1
            }
        },
        {
        label: "Female" ,
        data: [["True", 3],["False", 4]],
        bars: {
            show: true,
            barWidth: 0.13,
            order: 2
            }
        }           
        ];

        $.plot($("#placeholder"), data1, {      
        xaxis: {
            mode: "categories"
        },

        });
    });
</script>


<title>Test</title>
</head>
<body>
<div id="placeholder" style="width:600px;height:300px"></div>

</body>
</html>


$（文档）.ready（函数（）{
变量数据1=[
{
标签：“男性”，
数据：[“真”，1]，“假”，2]，
酒吧：{
秀：没错，
杆宽：0.13，
订单：1
}
},
{
标签：“女性”，
数据：[“真”，3]，“假”，4]，
酒吧：{
秀：没错，
杆宽：0.13，
订单：2
}
}           
];
$.plot（$（“#占位符”），数据1，{
xaxis：{
模式：“类别”
},
});
});
试验

使用上述代码，将显示图形，但不显示任何条形图。如果我删除order:1和order:2，它会正确显示，除了条之间重叠而不是相互偏移（我认为它只是忽略了orderbar插件）

这是我真正想做的一个非常简单的例子，但如果有人知道如何让它做我想做的事情，我会非常感激

总而言之，我想要的是两组两条线。第一组下面有“真”，第二组下面有“假”。如果可能的话，我不想用数字来表示这些值，因为这会使我更复杂的情况更加复杂。但如果必须的话，我仍然想知道如何这样做。

更改orderbar.js中的函数getAxeMinMaxValues

function getAxeMinMaxValues(series, AxeIdx) {
        var minMaxValues = new Array();
        for (var i = 0; i < series.length; i++) {
          series[i].data[series[i].data.length - 1][AxeIdx];
            minMaxValues[0] = 0;
            minMaxValues[1] = series[i].data.length - 1;
        }
        return minMaxValues;
    }

函数getAxeMinMaxValues（系列，AxeIdx）{ var minMaxValues=新数组（）；对于（变量i=0；i

希望这将有助于更改orderBars.js中的函数getAxeMinMaxValues

function getAxeMinMaxValues(series, AxeIdx) {
        var minMaxValues = new Array();
        for (var i = 0; i < series.length; i++) {
          series[i].data[series[i].data.length - 1][AxeIdx];
            minMaxValues[0] = 0;
            minMaxValues[1] = series[i].data.length - 1;
        }
        return minMaxValues;
    }

函数getAxeMinMaxValues（系列，AxeIdx）{ var minMaxValues=新数组（）；对于（变量i=0；i

希望这会有所帮助

首先，你不需要为你在问题中描述的内容去orderbar.js。这可以单独使用flot来完成。你是在寻找感谢船长，但该解决方案似乎使用了x轴的模式：“时间”，而不是“类别”。不幸的是，在我的情况下，使用“时间”模式对我不起作用。也许我遗漏了什么？你使用哪个flot版本？使用最新的稳定版本0.8我现在使用的是.81。我想我在上面的评论中做出了一个令人困惑的陈述。使用时间模式对我来说是可行的，我更愿意使用类别模式，因为我用php动态创建图形，使用时间模式会让我很难做我想做的事情。这就解决了问题。首先，你不需要为你在问题中描述的内容去orderbar.js。这可以单独使用flot来完成。你是否在寻找感谢你的队长，但该解决方案似乎使用了x轴的模式：“时间”，而不是模式：“类别”。不幸的是，使用“时间”“在我的情况下，模式对我不起作用。也许我遗漏了什么？你使用哪个flot版本？使用最新的稳定版本0.8我现在使用的是.81。我想我在上面的评论中做出了一个令人困惑的陈述。使用时间模式对我来说是可行的，我更愿意使用类别模式，因为我正在用php动态创建图形，而使用时间模式使我很难做我想做的事情