gpt4 book ai didi

javascript - 通过 orderbars.js 和类别将 Flot 与多个条形结合使用

转载 作者:行者123 更新时间:2023-11-28 20:20:25 25 4
gpt4 key购买 nike

我在使用 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”。如果可能的话,我不想使用数字来表示值,因为这会使我更复杂的情况变得更加复杂。但如果必须的话,我仍然想知道如何做到这一点。

最佳答案

更改 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;
}

希望这会有所帮助

关于javascript - 通过 orderbars.js 和类别将 Flot 与多个条形结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18456636/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com