Question

我使用flot库（v 0.8）生成一个图形，它似乎在数据系列的起点和终点之间画一条线。我似乎无法弄清楚为什么要绘制这条额外的线，你可以在这里看到：

graph

我创建了一个fiddle来测试显示问题（它缺少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);
}

Answer 1

你的时代重演;第一点 - 1372428000000 - 稍后重复十点。

当Flot到达你的系列中的那个点时，它会画一条线到下一个点 - 回到开头 - 然后重新追踪图的其余部分。

绘制连接起点和终点的线

1 个答案: