在时间轴上使用 In Flot 中的标记
Using markings In Flot on a time axis
我有一个图表可以监控网站访问者的流量,它目前显示的所有数据都没有问题:
大约每个月我都会更新并向订阅我的人发送一份时事通讯,我想知道是否有办法在该图表上显示这些时事通讯的发布时间。
因此,如果我在我的图表中查看过去一周的网站流量,而我的时事通讯是在星期一发出的,那么那天图表上会出现一条线:
我知道我可以通过标记来做到这一点,这是一种向 flot 中已经存在的图形添加线条的方法
{ xaxis: { from: 1, to: 2 }, color: "#000000" } //Creates a vertical line from 1 to 2
但是当您启用时间模式时,这似乎并不相同。例如。当时间模式打开时,我给它的标记参数不会显示
所以我的问题是:如何使用 flot 向出现在特定日期的图表添加标记?
编辑
$.plot("#chart_filled_blue", data1, $.extend(true, {}, Plugins.getFlotDefaults(), {
xaxis: {
min: start,
max: end,
mode: "time",
tickSize: [1, type],
tickLength: 0
},
series: {
lines: {
fill: true,
lineWidth: 1.5
},
points: {
show: true,
radius:4,
lineWidth: 1.1
},
grow: { active: true, growings:[ { stepMode: "maximum" } ] }
},
grid: {
hoverable: true,
clickable: true,
markings: [{
xaxis: {
from: 1530421200,
to: 1530507600
},
color: "#000000"
}]
},
tooltip: true,
tooltipOpts: {
content: '%s: %y'
}
}));
标记在带有时间轴的 flot 中工作得很好。你能 post 一些代码来帮助更好地理解问题吗?
您必须将标记 from
和 to
设置为您希望标记出现的时间戳:
grid: {
markings: [{
xaxis: {
from: 1336201200000,
to: 1336201200000
},
color: "#ff0000"
}]
}
This JSFiddle 有一个时间序列轴和标记的工作示例。
我有一个图表可以监控网站访问者的流量,它目前显示的所有数据都没有问题:
大约每个月我都会更新并向订阅我的人发送一份时事通讯,我想知道是否有办法在该图表上显示这些时事通讯的发布时间。
因此,如果我在我的图表中查看过去一周的网站流量,而我的时事通讯是在星期一发出的,那么那天图表上会出现一条线:
我知道我可以通过标记来做到这一点,这是一种向 flot 中已经存在的图形添加线条的方法
{ xaxis: { from: 1, to: 2 }, color: "#000000" } //Creates a vertical line from 1 to 2
但是当您启用时间模式时,这似乎并不相同。例如。当时间模式打开时,我给它的标记参数不会显示
所以我的问题是:如何使用 flot 向出现在特定日期的图表添加标记?
编辑
$.plot("#chart_filled_blue", data1, $.extend(true, {}, Plugins.getFlotDefaults(), {
xaxis: {
min: start,
max: end,
mode: "time",
tickSize: [1, type],
tickLength: 0
},
series: {
lines: {
fill: true,
lineWidth: 1.5
},
points: {
show: true,
radius:4,
lineWidth: 1.1
},
grow: { active: true, growings:[ { stepMode: "maximum" } ] }
},
grid: {
hoverable: true,
clickable: true,
markings: [{
xaxis: {
from: 1530421200,
to: 1530507600
},
color: "#000000"
}]
},
tooltip: true,
tooltipOpts: {
content: '%s: %y'
}
}));
标记在带有时间轴的 flot 中工作得很好。你能 post 一些代码来帮助更好地理解问题吗?
您必须将标记 from
和 to
设置为您希望标记出现的时间戳:
grid: {
markings: [{
xaxis: {
from: 1336201200000,
to: 1336201200000
},
color: "#ff0000"
}]
}
This JSFiddle 有一个时间序列轴和标记的工作示例。