0

データ系列の開始点と終了点の間に線を引いているように見える 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);
}
4

1 に答える 1