我正在使用 flot 库(v 0.8)生成一个图表,它似乎在数据系列的起点和终点之间画了一条线。我似乎无法弄清楚为什么要绘制这条附加线,您可以在此处看到:
我创建了一个小提琴来测试这个问题(它缺少浮动时间插件,所以我注释掉了与之相关的选项)。
这是代码:
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);
}