столбчатая диаграмма jquery flot несколько серий - PullRequest
Новая
       42

столбчатая диаграмма jquery flot несколько серий

12 голосов
/ 04 октября 2011

, чтобы упростить задачу, я предоставляю код: http://jsbin.com/otaruq

здесь мы имеем такой набор данных: (ищите больше источников) 

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

, где первое значение - это дата в формате UTC, а второе - оценка.

Теперь я пытаюсь сделать так, чтобы для каждой даты на оси y были столбцы, представляющие счет.бок о бок, как показано ниже: 

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

вместо этого теперь, как вы можете видеть, столбцы ставятся друг на друга.

любая помощь будет действительно оценена, спасибо

1 Ответ

14 голосов
/ 09 октября 2011

Самый простой способ сделать это - вручную изменить значения x.Я обнаружил, что 50,0000 миллисекунд - это хороший джиттер для ширины вашего бара.

Он производит следующее:

enter image description here

Полный код: 

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>
...