我正在尝试使用flot和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 :(得分:2)
在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更新为工作。
答案 1 :(得分:0)