Указание dygraphs x интервальные тики

Я хотел бы контролировать отображаемые интервалы оси x (и вертикальные линии сетки, связанные с каждой точкой метки), но я не смог найти способ сделать это. Dygraphs по умолчанию заполняет метки x на основе всего диапазона x, но я хочу большей детализации. Например, если я хочу представить данные за месяц за июль 14 года, я использую dateWindow для установки своих границ. По умолчанию Dygraphs дает мне x интервалов в 7/6, 7/13, 7/20 и 7/27 (начало каждой недели). Но я хочу больше меток и соответствующих вертикальных линий; например, каждые 3 дня вместо начала недели.

Это возможно? Я доволен тем, как отображается каждая метка x (поэтому я не думаю, что это средство форматирования меток). Я просто хочу их больше.


javascript dygraphs
person user2245759    schedule 25.08.2014    source источник

Ответы (3)


arrow_upward
4
arrow_downward

В настоящее время в экземпляре Dygraph есть открытый метод с именем getDateAxis.

Дополнительную информацию об этом можно найти на странице dygraph-tickers.js.

Если вы хотите, вы также можете начать читать с datePicker< /а>

Таким образом, вы можете обрабатывать желаемую «частоту» (каждые 3 дня, каждый 1 день) на основе значений maximum и minimum оси x.

Мой пример ниже не найдет «лучшую частоту», а вместо этого исправит ее так, чтобы ВСЕГДА показывался тик каждый ЧАС.

В целях тестирования измените 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);
          },
        },
      }
    }
  );
person Gabriel L. Oliveira    schedule 27.07.2016
comment
Мне пришлось использовать Dygraph.Granularity.HOURLY вместо Dygraph.HOURLY. - person lum; 27.05.2018
comment
Вы также можете использовать эту функцию для создания произвольных делений. - person rapto; 11.03.2021

arrow_upward
2
arrow_downward

Измените этот раздел в реальном файле dygraph-combined.js (2327):

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 в блоке параметров, где настраивается график, похоже, не работает. Я не уверен, почему.

person user1423857    schedule 01.12.2015
comment
Вы используете две учетные записи Stack Overflow? это смущает. - person trincot; 01.12.2015

arrow_upward
1
arrow_downward

Похоже, что объект оси предоставляет свойство тикера, которое представляет собой функцию, которую вы можете настроить для возврата нужных вам отметок (http://dygraphs.com/options.html#Axis отображение).

Взгляните на встроенные функции тикера Dygraphs: http://dygraphs.com/dygraph-tickers.js< /а>

Вы можете использовать их в качестве отправной точки для разработки собственных.

person ezanker    schedule 03.09.2014