データ系列の開始点と終了点の間に線を引いているように見える flot ライブラリ (v 0.8) を使用してグラフを生成しています。この追加の線が描かれている理由がわかりません。ここで確認できます。
問題を示すためにテストするためのフィドルを作成しました(flot timeプラグインが欠落しているため、それに関連するオプションをコメントアウトしました)。
コードは次のとおりです。
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);
}