2016-06-28 110 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