Specifying dygraphs x interval ticks
我想控制显示的 x 轴间隔(以及与每个标签点关联的垂直网格线),但我一直无法找到执行此操作的方法。默认情况下,Dygraphs 根据整个 x 范围填充 x 标签,但我想要更多粒度。
例如,如果我想呈现 14 年 7 月的一个月数据,我使用 dateWindow 来设置我的界限。默认情况下,Dygraphs 在 7/6、7/13、7/20 和 7/27(每周开始)给我 x 个间隔。但我想要更多的标签和相应的垂直线;例如每 3 天,而不是每周开始。
这可能吗?我对每个 x 标签的显示方式感到满意(所以我不认为它是标签格式化程序)。我只是想要更多。
现在在 Dygraph 实例中有一个名为
在
如果你愿意,你也可以从
开始阅读
因此,您可以根据 x 轴的
我下面的示例不会找到"最佳频率",而是将其修复为始终每小时显示一个刻度。
出于测试目的,将
1 2 3 4 5 6 7 8 9 10 11 12 13 | g = new Dygraph( document.getElementById("graphdiv"), graph_data, { // other options...... axes: { x: { ticker: function(min, max, pixels, opts, dygraph, vals) { return Dygraph.getDateAxis(min, max, Dygraph.HOURLY, opts, dygraph); }, }, } } ); |
在实际的 dygraph-combined.js 文件 (2327) 中更改此部分:
1 2 3 4 5 6 7 8 9 10 | x: { pixelsPerLabel: 70, <----- change this value!! axisLabelWidth: 60, axisLabelFormatter: Dygraph.dateAxisLabelFormatter, valueFormatter: Dygraph.dateValueFormatter, drawGrid: true, drawAxis: true, independentTicks: true, ticker: null // will be set in dygraph-tickers.js }, |
在设置图表的选项块中更改
看起来轴对象提供了 ticker 属性,您可以设置该函数以返回所需的刻度线(http://dygraphs.com/options.html#Axis display)。
看看内置的 Dygraphs 代码功能:http://dygraphs.com/dygraph-tickers.js
您可以将这些作为开发自己的起点。