0

我无法使用 flot 创建多个条形图。有一个插件可以在这里下载：http ://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js ，它使每个 x 类别具有多个条形图，如下所示： http://www.pikemere .co.uk/blog/tutorial-flot-how-to-create-bar-charts/（参见自定义条形图下方）。但是，他的示例有点不同，它使用时间函数而不是类别。

这是我的代码：

<!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>

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

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

综上所述，我想要的是有两套两个酒吧。第一组下面是“True”，第二组下面是“False”。如果可能的话，我不想使用数字来表示值，因为这会使我更复杂的情况变得非常复杂。但如果我必须这样做，我仍然想知道如何做到这一点。

4

1 回答 1

3

在 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;
    }

希望这会有所帮助

于 2014-06-27T14:34:03.487 回答