2013-06-28 3 views
0

Я создаю график, используя библиотеку флота (v 0.8), которая, как представляется, рисует линию между начальной точкой и конечной точкой ряда данных. Я не могу понять, почему эта дополнительная линия втягивается, которые вы можете увидеть здесь:Фиксированная линия, соединяющая начальную точку и конечную точку

graph

Я создал fiddle, чтобы проверить с этим показать проблему (она отсутствует в ФЛОТ времени плагин, поэтому я прокомментировал варианты, связанные с ним).

Вот код:

var options = { 
     series : { 
       lines: { show: true }, 
       color : "#00E5EE" 
     }, 
     xaxis: { 
       mode: "time", 
       timeformat: "%d %b %h:%M %P", 
       timezone: "browser", 
       tickLength: 0 
     }, 
     yaxis: { 
       tickLength: 0 
     }, 
     lines: { 
       show: true 
     }, 
     points: { 
       show: false 
     }, 
     grid: { 
       hoverable: true, 
       borderWidth: 0, 
       aboveData: true, 
     }, 
}; 
$("#placeholder").empty(); 
$.plot($("#placeholder"), [data], options); 

Вот ряд данных:

[ 
    [ 
    1372428000000, 
    0.01745128631591797 
    ], 
    [ 
    1372428060000, 
    0.03703117370605469 
    ], 
    [ 
    1372428120000, 
    0.32158660888671875 
    ], 
    [ 
    1372428180000, 
    0.06702804565429688 
    ], 
    [ 
    1372428240000, 
    0.06312179565429688 
    ], 
    [ 
    1372428360000, 
    0.030078887939453125 
    ], 
    [ 
    1372428420000, 
    0.13084697723388672 
    ], 
    [ 
    1372428480000, 
    0.011885643005371094 
    ], 
    [ 
    1372428540000, 
    0.09821128845214844 
    ], 
    [ 
    1372428000000, 
    0.01745128631591797 
    ], 
    [ 
    1372428060000, 
    0.03703117370605469 
    ], 
    [ 
    1372428120000, 
    0.32158660888671875 
    ], 
    [ 
    1372428180000, 
    0.06702804565429688 
    ], 
    [ 
    1372428240000, 
    0.06312179565429688 
    ], 
    [ 
    1372428360000, 
    0.030078887939453125 
    ], 
    [ 
    1372428420000, 
    0.13084697723388672 
    ], 
    [ 
    1372428480000, 
    0.011885643005371094 
    ], 
    [ 
    1372428540000, 
    0.09821128845214844 
    ] 
] 

Кроме того, используя немного CSS, чтобы повернуть XAxis метки:

.xAxis > .tickLabel 
{ 
    margin-top:40px; 
    -moz-transform:rotate(-90deg); 
    -o-transform:rotate(-90deg); 
    -webkit-transform:rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 

ответ

1

Ваш раз повторить ; первый пункт - 1372428000000 - повторяет десять очков позже.

Когда флот достигает этой точки в вашей серии, она рисует линию к следующей точке - назад в начале - и затем перечитывает остальную часть графика.

+0

Вау, я чувствую себя идиотом. Я смотрел на все, кроме набора данных для проблем. Это исправило проблему, спасибо за помощь. – somecallmemike