Question

我想控制显示的x轴间隔（并且垂直网格线与每个标签点相关联）但我无法找到这样做的方法。 Dygraphs默认情况下基于全部x范围填充x标签，但我想要更多粒度。例如，如果我想为7月和14日提供一个月的数据，我使用dateWindow来设置我的界限。默认情况下，Dygraphs在7 / 6,7 / 13,7 / 20和7/27（每周开始）给出x间隔。但我想要更多的标签和相应的垂直线;例如，每3天，而不是一周开始。

这可能吗？我对每个x标签的显示方式感到满意（所以我不认为它是标签格式化程序）。我只想要更多。

Answer 1

在实际的dygraph-combined.js文件（2327）中更改此部分：

checkout#edit

更改设置图表的选项块中的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 },值似乎不起作用。我不确定为什么。

Answer 2

现在Dygraph实例中有一个名为getDateAxis的公开方法。

在dygraph-tickers.js找到有关它的更多信息。

如果您愿意，也可以从datePicker

开始阅读

所以，你可以对待你想要的＆＃34;频率＆＃34; （每3天，每1天一次），基于x轴的maximum和minimum值。

我的下面的例子找不到＆＃34;最佳频率＆＃34;，而是将其修复为总是每小时显示一个滴答。

出于测试目的，将Dygraph.HOURLY更改为Dygraph.TWO_DAILY，无论您有什么缩放，每两天都会有一个勾号。

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

Answer 3

看起来轴对象提供了ticker属性，这是一个可以设置的函数，用于返回所需的标记（http://dygraphs.com/options.html#Axis显示）。

查看内置自动收报机功能的Dygraph：http://dygraphs.com/dygraph-tickers.js

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

指定dygraphs x interval ticks

3 个答案: