使用flot绘制时间序列数据并忽略大块时间。

4

我正在使用Flot绘制股票数据。如果我绘制单日数据,它可以正常工作。但是如果我在同一张图中绘制两天或更多天的数据,则会出现第一天结束和第二天开始之间的长线。

实际上,Flot看不到任何数据(市场已经关闭),因此只会在新一天开始时绘制一条线。

我该如何让Flot忽略市场关闭(美国东部时间下午4点)和市场开放(美国东部时间上午9:30)之间的时间?

所用的绘图数据如下:

$(function () {
    $.plot($("#placeholder"),
[ { data: [[1355131782000000, "2.95"], [1355132082000000, "2.99"], [1355132382000000, "2.97"], [1355132682000000, "2.9699"], [1355132982000000, "2.955"], [1355133282000000, "2.92"], [1355133582000000, "2.91"], [1355133882000000, "2.95"], [1355134182000000, "2.94"], [1355134482000000, "2.935"], [1355134782000000, "2.92"], [1355135082000000, "2.92"], [1355135382000000, "2.91"], [1355135682000000, "2.9"], [1355135982000000, "2.8901"], [1355136282000000, "2.865"], [1355136582000000, "2.92"], [1355136882000000, "2.945"], [1355137182000000, "2.95"], [1355137482000000, "2.925"], [1355137782000000, "2.92"], [1355138082000000, "2.925"], [1355138382000000, "2.92"], [1355138682000000, "2.92"], [1355138982000000, "2.93"], [1355139282000000, "2.9201"], [1355139582000000, "2.93"], [1355139882000000, "2.925"], [1355140182000000, "2.9115"], [1355140482000000, "2.92"], [1355140782000000, "2.91"], [1355141082000000, "2.92"], [1355141382000000, "2.91"], [1355141682000000, "2.91"], [1355141982000000, "2.915"], [1355142282000000, "2.915"], [1355142582000000, "2.91"], [1355142882000000, "2.905"], [1355143182000000, "2.9"], [1355143482000000, "2.9"], [1355143782000000, "2.89"], [1355144382000000, "2.885"], [1355144682000000, "2.88"], [1355144982000000, "2.89"], [1355145282000000, "2.89"], [1355145582000000, "2.89"], [1355145882000000, "2.89"], [1355146182000000, "2.88"], [1355146482000000, "2.885"], [1355146782000000, "2.89"], [1355147082000000, "2.89"], [1355147382000000, "2.88"], [1355147682000000, "2.88"], [1355147982000000, "2.89"], [1355148282000000, "2.89"], [1355148582000000, "2.88"], [1355148882000000, "2.88"], [1355149182000000, "2.9"], [1355149482000000, "2.9"], [1355149782000000, "2.89"], [1355150382000000, "2.9"], [1355150682000000, "2.91"], [1355150982000000, "2.9"], [1355151282000000, "2.91"], [1355151582000000, "2.9001"], [1355151882000000, "2.905"], [1355152182000000, "2.9015"], [1355152482000000, "2.9"], [1355152782000000, "2.96"], [1355153082000000, "3.0"], [1355153382000000, "3.01"], [1355153682000000, "3.005"], [1355153982000000, "3.005"], [1355154282000000, "3.01"], [1355154582000000, "3.01"], [1355154882000000, "3.02"], [1355155182000000, "3.02"]] } ],
{ xaxes: [ { mode: 'time', 
             twelveHourClock: true,
             timeformat: "%H:%M%p"} ],
  yaxes: [  ] })
});

更新:在回答中新增了新的图表: enter image description here

这不是我想要的。我想要将市场收盘和开盘之间的图形基本合并。我不想看到那么大的空白区域...


我曾经遇到过同样的问题。我认为这个答案也会解决你的问题。https://dev59.com/SGw05IYBdhLWcg3wfx80 - user1874941
1个回答

3
在间隔中添加 x 轴值落在其中的虚假数据点,并将 y 轴值设置为 null,以创建不连续性。
有关更多信息,请参见 API 文档中的 数据格式 部分。
编辑:要实际折叠轴以仅显示可用数据,请勿使用时间模式。如果值不是单调递增的,则您并未真正显示时间,而应根据可用数据手动指定 x 轴刻度的数组。

好的,这个结果并不如预期 - 我已经在我的原始帖子中更新了一张新结果的图片。我在结束时间和开始时间之间添加了两个空值时间戳。请查看新的图表... - mr-sk
好的,我曾经尝试将它们作为两组数据绘图,但那只是改变了颜色。我会尝试您的建议,那应该可以。 - mr-sk

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接