jquery flot条形图多个系列
[英]jquery flot bar chart multiple series
问题描述
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 任何帮助都会真正得到应用，谢谢
1 个解决方案
解决方案1
14 已采纳 2011-10-09 14:24:25
The easiest way to do this would be to manually jitter your x values. 最简单的方法是手动抖动x值。 I found that 50,0000 milliseconds is a good jitter for your bar width. 我发现50,000毫秒是一个很好的条形宽度抖动。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.