Question

我在使用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>

使用上面的代码，图表会显示，但没有任何条形图。如果我删除了订单：1和订单：2，它会正确显示，除非条形图彼此重叠而不是相互抵消（我认为它只是忽略了订单栏插件）。

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

总结一下，我想要的是两组两个吧。第一组在它们下面设置为“True”，第二组在它们下面设置为“False”。如果可能的话，我不想使用数字来表示值，因为它会使我更复杂的情况变得更加复杂。但如果我必须，我仍然想知道如何这样做。

Answer 1

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

希望这会有所帮助

使用带有orderbars.js和类别的多个条形图

1 个答案: