【问题标题】:Using markings In Flot on a time axis在时间轴上使用 Flot 中的标记
【发布时间】:2018-07-03 19:08:13
【问题描述】:

我有一个图表可以监控访问网站的人的流量,它目前显示所有数据都没有问题:

每个月左右,我都会更新并向订阅我的人发送简报,我想知道是否有办法在该图表上显示这些简报的发布时间。

因此,如果我在图表中查看过去一周的网站流量,并且我的时事通讯是在周一发送的,那么图表上会在当天出现一条线:

我知道我可以通过标记来做到这一点,这是一种在已经存在的浮点图中添加线条的方法

{ 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'
    }
    }));

【问题讨论】:

  • 您必须将标记值乘以 1000 才能以毫秒为单位获得它们,这就是 flot 用于基于时间的轴的原因

标签: javascript jquery time graph flot


【解决方案1】:

标记在时间轴上工作得很好。你能发布一些代码来帮助更好地理解这个问题吗?

您必须将标记 fromto 设置为您希望标记出现的时间戳:

grid: {
  markings: [{
    xaxis: {
      from: 1336201200000,
      to: 1336201200000
    },
    color: "#ff0000"
  }]
}

This JSFiddle 有一个时间序列轴和标记的工作示例。

【讨论】:

  • 我添加了一些代码。你的建议我也试过了,还是不行
  • @NoahBaxley 您必须将标记值乘以 1000 才能以毫秒为单位获得它们,这就是 flot 用于基于时间的轴的方法。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多