javascript jqPlot DateAxis tickInterval 不起作用
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8467233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqPlot DateAxis tickInterval not working
提问by Chris
I'm trying to draw a chart with a single datapoint each month. I'm sending this through to jqPlot as a single point on the first of each month:
我正在尝试每个月绘制一个带有单个数据点的图表。我在每个月的第一天将它作为单点发送给 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' }
}
}
}
I'm loading the chart data using Ajax. Some datasets have more points of data than others - in the example above with only 2 points, the x-axis ticks (which '%b' means just appear as Oct and Nov) are rendered automatically along the axis, but too often, e.g. Sep...Oct...Oct...Oct...Oct...Nov - at regular points along the line that is shown. I just want a single tick at the start of Oct and another at the start of Nov.
我正在使用 Ajax 加载图表数据。一些数据集比其他数据集有更多的数据点 - 在上面的例子中只有 2 个点,x 轴刻度('%b' 表示只显示为 Oct 和 Nov)沿轴自动呈现,但太频繁了,例如Sep...Oct...Oct...Oct...Oct...Nov - 沿所示线的常规点。我只想在 10 月初和 11 月初一个刻度。
I have spent a lot of time searching and it seems tickInterval is made for this, but adding
我花了很多时间搜索,似乎tickInterval是为此而制作的,但添加
tickInterval: '1 month'
just makes the x-axis, datapoints and line disappear - this is the broken functionality I'm referring to! Specifying any other interval e.g.
只是让 x 轴、数据点和线消失——这是我指的损坏的功能!指定任何其他间隔,例如
tickInterval: '2 days'
also breaks it.
也打破它。
A workaround is to provide the ticks manually, e.g.
一种解决方法是手动提供刻度,例如
ticks: ['2011-10-01','2011-11-01']
This doesput the ticks in the right place, but
这确实将蜱放在正确的位置,但是
a) is a hassle that should not be required, and
a) 是不应该被要求的麻烦,并且
b) loses the nice padding at either end of the graph's datapoints, so the points at either end appear on the edges of the graph. Unless manual ticks either side are added, of course, but in the Oct-Nov example above I don't want to provide a whole month on either side because then the interesting data takes up only the middle third of the graph.
b) 丢失了图数据点任一端的良好填充,因此任一端的点都出现在图的边缘上。当然,除非在任一侧添加手动刻度,但在上面的 10 月至 11 月示例中,我不想在任一侧提供整月,因为这样有趣的数据仅占图表的中间三分之一。
Can anyone help me with this? Thanks in advance.
谁能帮我这个?提前致谢。
EDIT - found a solution:Providing a minattribute for the axis does appear to fix this (for whatever reason... bug?), so unless anyone has any better ideas I'll do this!
编辑 - 找到了一个解决方案:为轴提供一个min属性似乎可以解决这个问题(无论出于何种原因......错误?),所以除非有人有更好的想法,否则我会这样做!
回答by GuySoft
I found a solution! You need to specify the tickinterval as a javascript timestamp. So lets say you want 1 hour. That would be 1000*60*60 = 3600000 (javascript timestamps are in milliseconds).
我找到了解决办法!您需要将时间间隔指定为 javascript 时间戳。所以让我们说你想要 1 小时。那将是 1000*60*60 = 3600000(javascript 时间戳以毫秒为单位)。
So you would write: tickInterval:'3600000',
所以你会写:tickInterval:'3600000',
Works here.
在这里工作。
回答by KunalC
tickInterval:'1 day'
works. You can try:
tickInterval:'1 day'
作品。你可以试试:
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
tickOptions: { formatString: '%b' },
tickInterval: '1 day'
}
回答by Joris Mans
Since I think you cannot answer your own question (and I ran in to the same problem), i'll post your solution as answer, as it solved it on my side too:
由于我认为您无法回答自己的问题(并且我遇到了同样的问题),因此我会将您的解决方案作为答案发布,因为它也解决了我的问题:
Providing a min attribute for the axis does appear to fix this (for whatever reason... bug?), so unless anyone has any better ideas I'll do this!
为轴提供 min 属性似乎可以解决这个问题(无论出于何种原因......错误?),所以除非有人有更好的想法,否则我会这样做!
回答by AdrianoRR
You should specify a timestamp on your plot data. As noted on jqplot example of Date Axes:
您应该在绘图数据上指定时间戳。如日期轴的 jqplot 示例所述:
Note, although jqPlot will parse most any human readable date, it is safest to use javascript time stamps when possible. Also, it is best to specify a date and time and not just a date alone. This is due to inconsistent browser handling of local time vs. UTC with bare dates.
请注意,尽管 jqPlot 将解析大多数人类可读的日期,但在可能的情况下使用 javascript 时间戳是最安全的。此外,最好指定日期和时间,而不仅仅是日期。这是由于浏览器对本地时间与带有裸日期的 UTC 的处理不一致。
You can check it here: http://www.jqplot.com/deploy/dist/examples/date-axes.html
你可以在这里查看:http: //www.jqplot.com/deploy/dist/examples/date-axes.html
I'm mentioning it because i've stumbled upon this problem 2 days ago. I solved it by passing a timestamp and defining a greater tickInterval than '1 day'.
我之所以提到它,是因为我两天前偶然发现了这个问题。我通过传递时间戳并定义比“1天”更大的tickInterval来解决它。
回答by dunno
I looked into the jqplot.dateAxisRenderer.js, and it looks like the reset function needs to be called in order for the this.tickInterval variable to get set. I vaguely recall that you can manually reset the renderer, but do note that tick interval is specified in the millisecond format (at least, I didn't catch any translation with my quick glance).
我查看了 jqplot.dateAxisRenderer.js,看起来需要调用 reset 函数才能设置 this.tickInterval 变量。我依稀记得您可以手动重置渲染器,但请注意滴答间隔是以毫秒格式指定的(至少,我快速浏览时没有发现任何翻译)。
I think this is just a bug.
我认为这只是一个错误。
And on a side note, I commented out the only min.getUtcOffset() call in the function, since it was introducing unwanted "drift" (I want local time), and causes the graph to get chopped off on the left.
另外,我注释掉了函数中唯一的 min.getUtcOffset() 调用,因为它引入了不需要的“漂移”(我想要当地时间),并导致图形在左侧被截断。