微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery flot bar图多系列

为了使事情变得容易,我提供代码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>

原文地址:https://www.jb51.cc/jquery/179313.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐