关于 javascript:Specifying dygraphs x interval ticks

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 实例中有一个名为 getDateAxis 的公开方法。

dygraph-tickers.js 找到更多信息。

如果你愿意,你也可以从 datePicker

开始阅读

因此,您可以根据 x 轴的 maximumminimum 值来处理您想要的"频率"(每 3 天,每 1 天)。

我下面的示例不会找到"最佳频率",而是将其修复为始终每小时显示一个刻度。

出于测试目的,将 Dygraph.HOURLY 更改为 Dygraph.TWO_DAILY,无论您使用何种缩放,您都会每两天打勾。

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
},

在设置图表的选项块中更改 pixelsPerLabel 值似乎不起作用。我不知道为什么。


看起来轴对象提供了 ticker 属性,您可以设置该函数以返回所需的刻度线(http://dygraphs.com/options.html#Axis display)。

看看内置的 Dygraphs 代码功能:http://dygraphs.com/dygraph-tickers.js

您可以将这些作为开发自己的起点。