jquery 浮动条形图多个系列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7640040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery flot bar chart multiple series
提问by Julie Rokk
in order to make things easy to undertand i'm providing the code: http://jsbin.com/otaruq
为了使事情易于理解，我提供了代码：http: //jsbin.com/otaruq
what we have here is a data set like this: (look the source for more)
我们这里有一个这样的数据集：（更多信息请查看来源）
"label": "scott",
"data": [[1317427200000, "17017"], [1317513600000, "77260"]]
where the first value is a date in UTC format and second should be score.
其中第一个值是UTC格式的日期，第二个应该是分数。
now, what i'm trying to do is to have for each date in the y axis the bars representing the score side by side, like below:
现在，我想要做的是让 y 轴上的每个日期并排代表分数的条形，如下所示：
3 | # #
2 | # # # # # #
1 | # # # # # # # # #
0 |_________________________________
1 oct 2 oct 3 oct
instead now as you can see the bars are staked each one over the other.
而现在，正如您所看到的那样，这些条形图一个一个地放在另一个上。
any help would be really appreaciated, thank's
任何帮助都会非常感谢，谢谢
回答by Mark
The easiest way to do this would be to manually jitter your x values. I found that 50,0000 milliseconds is a good jitter for your bar width.
最简单的方法是手动抖动 x 值。我发现 50,0000 毫秒对于您的条宽来说是一个很好的抖动。
It produces the following:
它产生以下内容：
Full code:
完整代码：
var data = [{
"label": "scott",
"data": [[1317427200000-5000000*3, "17017"], [1317513600000-5000000*5, "77260"]]
},
{
"label": "martin",
"data": [[1317427200000-5000000*2, "96113"], [1317513600000-5000000*4, "33407"]]
},
{
"label": "solonio",
"data": [[1317427200000-5000000, "13041"], [1317513600000-5000000*3, "82943"]]
},
{
"label": "swarowsky",
"data": [[1317427200000, "83479"], [1317513600000-5000000*2, "96357"], [1317600000000-5000000, "55431"]]
},
{
"label": "elvis",
"data": [[1317427200000+5000000, "40114"], [1317513600000-5000000*1, "47065"]]
},
{
"label": "alan",
"data": [[1317427200000+5000000*2, "82504"], [1317513600000, "46577"]]
},
{
"label": "tony",
"data": [[1317513600000+5000000, "88967"]]
},
{
"label": "bill",
"data": [[1317513600000+5000000*2, "60187"], [1317600000000, "39090"]]
},
{
"label": "tim",
"data": [[1317513600000+5000000*3, "95382"], [1317600000000+5000000, "89699"]]
},
{
"label": "britney",
"data": [[1317513600000+5000000*4, "76772"]]
},
{
"label": "logan",
"data": [[1317513600000+5000000*5, "88674"]]
}];
var options = {
series: {
bars: {
show: true,
barWidth: 60 * 60 * 1000,
align: 'center'
},
},
yaxes: {
min: 0
},
xaxis: {
mode: 'time',
timeformat: "%b %d",
minTickSize: [1, "month"],
tickSize: [1, "day"],
autoscaleMargin: .10
}
};
$(function() {
$.plot($('#placeholder'), data, options);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<div id="placeholder" style="width:800px;height:400px;"></div>
</body>
</html>