Я использую amchart, я хочу создать диаграмму в реальном времени и установить minDate, maxDate для оси x и отформатировать ее в чч: мм. Я пытался использовать minimumDate, maximumDate, "minPeriod" : "hh", но это не помогло.
Мой код: demo1.
Я хочу использовать amchart для построения диаграммы в реальном времени, например: demo2 (используйте диаграмму флота).
Метки по оси x статичны не для запуска, а для накопления данных. Помоги мне, пожалуйста! Спасибо!
При обновлении времени необходимо установить новый экземпляр даты или отдельное значение. Обновление переменной startDate обновляет все точки данных, которые совместно используют этот объект даты, поскольку AmCharts не клонирует объекты даты в вашем поставщике данных. Быстрое решение состоит в том, чтобы использовать отметку времени в миллисекундах, полученную в результате вызова setMinutes, например:
var newDate = startDate.setMinutes(startDate.getMinutes() + 10);
var visits = randomIntFromInterval(50, 100);
chartData.push({
date: newDate,
visits: visits
});
AmCharts внутренне преобразует значения миллисекунд в новый объект Date. Это должно применяться к вашим методам генерации и обновления.
Для параметра minPeriod следует установить минимальный период между точками данных. Поскольку вы добавляете данные с шагом в 10 минут, это должно быть "mm", не "hh".
По умолчанию categoryAxis не поддерживает настройку minimumDate и maximumDate, однако вы можете использовать плагин datePadding, чтобы добавить эту функциональность. Этот плагин позволит вам установить свойство minimumDate и maximumDate в вашем categoryAxis, когда вы добавите следующий тег script после того, как ваш AmCharts включает:
<script src="//www.amcharts.com/lib/3/plugins/tools/datePadding/datePadding.min.js"></script>
Чтобы сохранить ваш диапазон дат после обновления диаграммы, вы должны вызвать метод плагина AmCharts.datePaddingProcess для повторного обновления диапазона перед перерисовкой диаграммы.
Вот как будет выглядеть ваш метод updateChart после использования плагина datePadding:
function updateChart() {
var newDate = startDate.setMinutes(startDate.getMinutes() + 10);
var visits = randomIntFromInterval(50, 100);
chart.dataProvider.push({
date:newDate,
visits:visits
});
AmCharts.datePaddingProcess(chart, true);
chart.validateData();
}
А вот как будет выглядеть ваша categoryAxis:
"categoryAxis": {
"parseDates": true,
"gridAlpha": 0.15,
"axisColor": "#DADADA",
"minPeriod" : "mm",
"minimumDate": min,
"maximumDate": max
},
