Плавающая полоса AmCharts с датами на оси x

У меня есть множество предметов (в моем случае - опросы), у которых есть определенное «время открытия». Используя AmCharts, я хотел бы отображать все опросы с течением времени в виде плавающей гистограммы. Начало плавающей полосы должно быть датой, когда опрос открыт для заполнения, конец полосы должен быть датой openUntil для этого опроса.

Я читаю документацию по API и пытаюсь объединить примеры для Плавающая гистограмма и XY-диаграмма с осью на основе даты. Пока моя ось Y заполнена зарегистрированными опросами, плавающие столбцы (а также ось X) не отображаются.

Плагин dataLoader извлекает следующие данные:

[{
    "survey":"Test Survey 2",
    "openFrom":"2016-08-01",
    "openUntil":"2016-08-31",
    "color":"#ff9900"
 },
 {
    "survey":"Test Survey 1",
    "openFrom":"2016-05-06",
    "openUntil":"2016-06-06",
    "color":"#ff9900"
}]

Код реализации, который у меня есть:

var chart = AmCharts.makeChart('chart-container', {
    'type' : 'serial',
    'dataLoader' : {
        'url' : urlToFetchDataFrom
    },
    'language': 'nl',
    'categoryAxis' : {
        'position': 'right'
    },
    'valueAxis' : [{
        'type': 'date',
        'minimumDate': new Date(2016, 1, 1),
        'minimumDate': new Date(2016, 12, 31)
    }],
    'categoryField' : 'survey',
    'graphs' : [{
        'type': 'column',
        'dateFormat': 'YYYY-MM-DD',
        'openField' : 'openFrom',
        'valueField' : 'openUntil'
    }],
    'rotate': true,
    'dataDateFormat': 'YYYY-MM-DD'
});

Диаграмма отображается как: это

Любые предложения о том, как создать плавающую гистограмму с границами дат, нанесенными за определенный период времени на оси x?


javascript charts amcharts
person Ben Fransen    schedule 10.12.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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

1) valueAxes написано с ошибкой как "valueAxis".

2) У вас minimumDate установлено дважды. Второй, вероятно, должен быть maximumDate.

3) Даты в JavaScript отсчитываются от нуля. Итак, январь - 0, декабрь - 11.

Следующий код должен заставить диаграмму выглядеть должным образом:

var chart = AmCharts.makeChart('chart-container', {
    'type' : 'serial',
    'dataLoader' : {
        'url' : urlToFetchDataFrom
    },
    'language': 'nl',
    'categoryAxis' : {
        'position': 'right'
    },
    'valueAxes' : [{
        'type': 'date',
        'minimumDate': new Date(2016, 0, 1),
        'maximumDate': new Date(2016, 11, 31)
    }],
    'categoryField' : 'survey',
    'graphs' : [{
        'type': 'column',
        'dateFormat': 'YYYY-MM-DD',
        'openField' : 'openFrom',
        'valueField' : 'openUntil'
    }],
    'rotate': true,
    'dataDateFormat': 'YYYY-MM-DD'
});
person martynasma    schedule 10.12.2015
comment
Следуя одному из других примеров, я также увидел свою опечатку в axes и заметил дубликат minimumDate. Я не знал о диапазоне от 0 до 11 для дат в javascript. Спасибо, теперь работает как шарм! - person Ben Fransen; 10.12.2015
comment
Отлично. Рад, что смог помочь. - person martynasma; 10.12.2015