13

为了让事情容易理解，我提供了代码：http: //jsbin.com/otaruq

我们这里有一个这样的数据集：（查看源代码以获取更多信息）

 "label": "scott",
    "data": [[1317427200000, "17017"], [1317513600000, "77260"]]

其中第一个值是 UTC 格式的日期，第二个应该是分数。

现在，我要做的是在 y 轴上为每个日期设置并排代表分数的条形，如下所示：

   3 | #                          # 
   2 | # #         #   #          # #
   1 | # # #       # # #        # # #
   0 |_________________________________
     1 oct         2 oct        3 oct

取而代之的是，正如您所看到的那样，这些条形图一个一个地放置在另一个之上。

任何帮助都会非常感激，谢谢

4

1 回答 1

13

最简单的方法是手动抖动 x 值。我发现 50,0000 毫秒对于您的条形宽度来说是一个很好的抖动。

它产生以下内容：

在此处输入图像描述

完整代码：

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>

于 2011-10-09T14:24:25.800 回答