2016-06-28 115 views
0

我想用flot和jQuery創建一個帶有目標線條的條形圖。用條形圖和線條繪製flot圖形

目標每個月保持不變,而數據上下移動。我可以創建沒有問題的酒吧,但我不能顯示行。我不知道我失蹤

我上傳這是造成我在這裏發佈的代碼:

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

指定的數據對象行選項的正確方法是不使用(每Flot's api.md)的series對象:

{ 
    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

options取出

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

更新fiddle

+0

謝謝。這也工作,但我需要線路,所以我用mechenbier的解決方案。 – bigbadbaboonboy