为了使事情变得容易,我提供代码:
http://jsbin.com/otaruq
我们在这里是一个这样的数据集:(查看更多的源)
"label": "scott","data": [[1317427200000,"17017"],[1317513600000,"77260"]]
其中第一个值是UTC格式的日期,第二个值应为分数.
现在,我想要做的是在y轴上的每个日期表示并列的比分,如下所示:
3 | # # 2 | # # # # # # 1 | # # # # # # # # # 0 |_________________________________ 1 oct 2 oct 3 oct
而现在,您可以看到酒吧每一个都放在另一个上.
任何帮助都会真的很欣赏,谢谢
解决方法
最简单的方法是手动抖动你的x值.我发现50,00毫秒是你的条宽度的一个很好的抖动.
它产生以下内容:
全部代码:
var data = [{ "label": "scott","data": [[1317427200000-5000000*3,[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","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"],"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>