Плавающий стержень AmCharts с датами по оси x

Question

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

Я читаю API documentation и пытаюсь объединить примеры для Floating bar chart и XY chart with date based axis. Хотя моя ось 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?

Answer 1

Есть несколько вещей неправильно с вашим кодом, которые предотвращают график показывать правильно:

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