jquery flot条形图多个系列

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

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,000毫秒是一个很好的条形宽度抖动。

It produces the following:

它产生以下结果:

jquery flot条形图多个系列

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>

#1

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,000毫秒是一个很好的条形宽度抖动。

It produces the following:

它产生以下结果:

jquery flot条形图多个系列

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>

秒客网

jquery flot条形图多个系列

1 个解决方案

#1

#1

相关文章