繁体   English   中英

浮点线连接起点和终点

[英]Flot line connecting starting point and end point

我正在使用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);
}

你的时间重复; 第一点-1372428000000-以后重复十点。

当Flot到达系列中的那个点时,它会画一条线到下一个点-从起点开始-然后重新追踪其余的曲线。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM