2016-06-28 2 views
0

Я пытаюсь создать гистограмму с целевой линией, используя флот и jQuery.рисовать график флота с баром и строкой

Цель остается неизменной каждый месяц, в то время как данные перемещаются вверх и вниз. Я могу создавать бары без проблем, но я не могу отобразить строку. Я не уверен, что я пропускаю

Я загрузил код, который вызывает у меня вопрос здесь:

https://jsfiddle.net/bigbadbaboonboy/r7j0k9gz/

<div id="risla-graph" class="graph"></div> 

#risla-graph { 
margin: 0 auto; 
text-align: center; 
width: 80%; 
height: 400px; 
} 

var datasets = [{"label":"ALL RiSLA","data":[{"0":1451606400000,"1":73.83}, 
{"0":1454284800000,"1":69.21},{"0":1456790400000,"1":88.33}, 
{"0":1459465200000,"1":85.99},{"0":1462057200000,"1":82.32}, 
{"0":1464735600000,"1":0}],"series":{"lines":{"show":false}},"idx":0}, 
{"label":"Target","color":"#006E2E","data":[{"0":1451606400000,"1":92}, 
{"0":1454284800000,"1":92},{"0":1456790400000,"1":92}, 
{"0":1459465200000,"1":92},{"0":1462057200000,"1":92}, 
{"0":1464735600000,"1":0}],"series":{"lines": 
{"show":true,"steps":true,"linewidth":1}},"bars":{"show":false},"legend": 
{"show":false},"idx":1}]; 

var options = {"series":{"stack":0,"lines": 
{"show":false,"steps":false},"bars":{"show":true,"fill":1,"align":"center" 
,"lineWidth":0,"barWidth":518400000.0000001}} 
,"xaxis":{"mode":"time","timeformat":"%b %y" 
,"tickSize":[1,"month"]},"yaxis":{"min":64.21,"max":97} 
,"grid":{"clickable":true,"hoverable":true},"legend":{"show":false}}; 

plot = $.plot($('#risla-graph'), datasets, options); 

ответ

0

В вашем datasets массиве вы заключаете lines варианты в объекте series.

series: { 
    lines: { 
     show: true, 
     steps: true, 
     linewidth:1 
    } 
} 

Правильный способом задать параметры для линий в объекте данных является без series объекта (за Flot's api.md):

{ 
    color: color or number 
    data: rawdata 
    label: string 
    lines: specific lines options 
    bars: specific bars options 
    points: specific points options 
    xaxis: number 
    yaxis: number 
    clickable: boolean 
    hoverable: boolean 
    shadowSize: number 
    highlightColor: color or number 
} 

Я обновляю JSFiddle работать.

+0

спасибо. Выведение серии помогло выявить целевую линию. – bigbadbaboonboy

0

Удалить

"lines": {"show": false, "steps": false} 

от вашего options.

Обновлено fiddle.

+0

Спасибо. Это тоже сработало, хотя мне нужна была линия для шага, поэтому я использовал решение mechenbier. – bigbadbaboonboy

Смежные вопросы