Dygraphs отображает значение даты только для года

Я разрабатываю гистограмму для отображения годового агрегированного значения по сравнению с серией других годовых значений. Значения общего водопотребления за год по сравнению с предыдущим годом и так далее. Я не могу понять, как отформатировать поле даты в моем CSV для одного годового значения. Предполагая, что это должно быть что-то вроде 20130101, как мне настроить метку оси X, чтобы просто показывать 2013 2012 2011 и т. д.?

CSV

Date,Litres 
2012,42047 
2013,18604.5

Код

g4 = new Dygraph(document.getElementById("year"),
                 "192.168.252.30/monitoring/data_water_year.php",
                 {legend: 'always', 
                  title: 'Yearly Water Usage', 
                  xlabel: 'Date', 
                  ylabel: 'Litres', 
                  includeZero: true, 
                  animatedZooms: true, 
                  drawXGrid: false, 
                  plotter: barChartPlotter} 
);

javascript dygraphs
person Stephen A    schedule 04.06.2013    source источник
comment
Можете ли вы опубликовать код, который вы пробовали до сих пор? Это поможет пользователям легче ответить на ваш вопрос.   -  person Brant Olsen    schedule 04.06.2013
comment
Нет проблем. Вот мой CSV. Дата, литры 2012,42047 2013,18604,5 Вот код: g4 = new Dygraph(document.getElementById(year),192.168.252.30/monitoring/data_water_year.php,{ легенда: 'всегда', заголовок: 'Годовое использование воды', метка xlabel: 'Дата', метка y: 'Литры', includeZero: true,animatedZooms: true , drawXGrid: false, плоттер: barChartPlotter } );   -  person Stephen A    schedule 05.06.2013

Ответы (1)


arrow_upward
6
arrow_downward

Вы хотите установить параметр axisLabelFormatter для оси x на функцию, которая выводит только год. Возможно, параметр valueFormatter также. См. http://dygraphs.com/options.html#axisLabelFormatter и http://dygraphs.com/tests/value-axis-formatters.html для вдохновения.

Ваш код будет выглядеть примерно так:

new Dygraph(div, data, {
  axes: {
    x: {
      axisLabelFormatter: function(d) { return d.getFullYear() },
      valueFormatter: function(ms) { return new Date(ms).getFullYear() }
    }
  }
});
person danvk    schedule 06.06.2013