jqPlot日期轴tickInterval无效

Question

我想绘制一个每月只有一个数据点的图表。我将其作为在每个月的第一天发送给jqPlot的单个点：

$.jqplot('actualChart', [[['2011-10-01',0.296],['2011-11-01',0.682]]], {
    title: programSelection.options[programSelection.selectedIndex].text,
    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
            tickOptions: { formatString: '%b' }
        }
    }
}

我正在使用Ajax加载图表数据。一些数据集的数据点比其他数据集更多 - 在上面的例子中只有2个点，x轴刻度（'%b'表示仅显示为Oct和Nov）会自动沿着轴渲染，但太频繁了，例如Sep...Oct...Oct...Oct...Oct...Nov - 在所示线的规则点上。我只想在十月初和十一月初有一个单独的刻度。

我花了很多时间搜索，好像tickInterval就是为此而设计的，但添加

tickInterval: '1 month'

只是使x轴、数据点和线条消失了 - 这就是我所指的损坏功能! 指定任何其他间隔，例如。

tickInterval: '2 days'

也会破坏它。

一个解决方法是手动提供引号，例如：

ticks: ['2011-10-01','2011-11-01']

这确实将刻度放在了正确的位置，但是

a）这应该不是必须要做的麻烦事情，而且

b）失去了图表数据点两端漂亮的间距，因此两端的点出现在图表的边缘。当然，除非手动添加两侧的刻度，但在上面的十月至十一月示例中，我不想在两侧提供整个月，因为那么有趣的数据仅占图表的中间三分之一。

有人能帮帮我吗？提前感谢。

编辑-找到了解决方案：为轴提供min属性似乎可以解决这个问题（由于某种原因...有bug吗？），所以除非有更好的办法，否则我会这样做！

- Chris B

Answer 1

我找到了一个解决方案！ 你需要将刻度间隔指定为JavaScript时间戳。 比如说你想要1小时，那就是1000*60*60=3600000（JavaScript时间戳以毫秒为单位）。

所以你可以写成：tickInterval:'3600000'，

这里可以使用。

- GuySoft

---

谢谢您。如果有人正在寻找一周的值，“120400”对我有用（基本上只是手动增加，直到它适合我的图形大小872px）。 - Tom

Answer 2

tickInterval:'1 day'有效。您可以尝试：

xaxis: {
        renderer: $.jqplot.DateAxisRenderer,
        rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
        tickOptions: { formatString: '%b' },
        tickInterval: '1 day'
       }

- KunalC

---

非常感谢。这个代码完美运行，尽管在使用它时设置了DateAxis.setTickInterval("1 hour")。 - Veilchen4ever

Answer 3

我认为你无法回答自己的问题（我也遇到了同样的问题），所以我将你的解决方案发布为答案，因为它也解决了我的问题：

为轴提供一个min属性似乎可以解决这个问题（出于某种原因... bug？），所以除非有更好的想法，否则我会这样做！

- Joris Mans

---

很高兴不仅是我一个人 - 这篇帖子让我获得了“飞絮”SO徽章 :) 感谢您将“解决方案”发布为答案。 - Chris B

Answer 4

我查看了jqplot.dateAxisRenderer.js文件，发现需要调用reset函数才能设置this.tickInterval变量。我模糊地记得你可以手动重置渲染器，但请注意tick间隔以毫秒格式指定（至少在我快速浏览时没有发现任何转换）。

我认为这只是一个错误。

另外，顺便说一下，我在函数中注释掉了唯一的min.getUtcOffset()调用，因为它引入了不必要的“漂移”（我想要本地时间），并导致图表在左侧被截断。

- dunno

Answer 5

你应该在绘图数据上指定一个时间戳。正如在jqplot日期轴示例中所注明的：

请注意，尽管jqPlot可以解析大多数人类可读日期，但最好在可能的情况下使用javascript时间戳以确保安全。此外，最好指定日期和时间，而不仅仅是日期。这是由于裸日期在本地时间与UTC之间的浏览器处理不一致所致。

你可以在这里检查：http://www.jqplot.com/deploy/dist/examples/date-axes.html

我提到这个问题是因为我两天前遇到了这个问题。我通过传递一个时间戳并定义一个大于“1天”的tickInterval来解决了它。

- AdrianoRR

---

非常感谢您的评论 - 我们最终使用了一个名为Syncfusion的不同（服务器端）库，但对于我回到jqplot的任何项目，我们一定会记住这一点。 - Chris B