Данные временной отметки с использованием Javascript

У меня есть массив временных меток, например [1485343314150, 1485343314150, 1485343314150, 1485343314300, 1485343314300, 1485343314400,1485343314450]. Здесь есть 3 значения для 1485343314150, 2 значения для 1485343314300 и 1 значения каждого для 1485343314400 и 1485343314450Данные временной отметки с использованием Javascript

Таким образом, хотя прокладки на графике

Х = [1485343314150,1485343314300,1485343314400,1485343314450]

Y = [3,2,1,1]

Мне нужен способ представления этих X и Y, так что значения Xs преобразуются в человеко-читаемые данные, такие как 24 февраля 5:25 вечера.

Можно ли это сделать через Chart.js или amCharts? Я искал, но ничего не мог найти.

источник

2017-01-26 shikhar bansal

[moment.js] (https://momentjs.com/) имеет хорошие функции форматирования даты, и я думаю, что amCharts по крайней мере имеет свои собственные функции форматирования - в любом случае любая библиотека диаграмм должна иметь возможность конвертировать временные метки в отформатированные даты – Fissio

См. это: https://www.amcharts.com/kbase/simulating-date-based-axis-xy-chart-using-labelfunction-timestamps-values/ "labelFunction": function (value) { var date = new Дата (значение); return AmCharts.formatDate (дата, "MMM DD"); } –

В AmCharts вы можете установить parseDates к true в вашем categoryAxis (который является таким же, как ось X), если вы используете последовательный график (линия, сглаженная линия или столбец). AmCharts' XY график также может обрабатывать даты, а также установив один из valueAxes' type к "date", но доступные типы диаграмм ограничены линиями/пуль

При включении parseDates, диаграмма будет автоматически форматировать их использовать для чтения строки даты. Вы можете настроить формат, указав свой собственный массив dateFormats в категорииAxis. Вы можете найти более подробную информацию об этом here.

Вот пример использования последовательной диаграммы. Ваша частота данных в incrments миллисекунд, так что я установил CategoryAxis' minPeriod для размещения:

var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "dataProvider": [{ 
 
    "timestamp": 1485343314150, 
 
    "value": 3 
 
    },{ 
 
    "timestamp": 1485343314300, 
 
    "value": 2 
 
    },{ 
 
    "timestamp": 1485343314400, 
 
    "value": 1 
 
    },{ 
 
    "timestamp": 1485343314450, 
 
    "value": 1 
 
    }], 
 
    "graphs": [{ 
 
    "bullet": "round", 
 
    "type": "smoothedLine", 
 
    "valueField": "value" 
 
    }], 
 
    "categoryField": "timestamp", 
 
    "categoryAxis": { 
 
    "parseDates": true, 
 
    "minPeriod": "fff" 
 
    } 
 
});

#chartdiv { 
 
    width: 100%; 
 
    height: 300px; 
 
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="//www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="//www.amcharts.com/lib/3/themes/light.js"></script> 
 

 
<div id="chartdiv"></div>

Вы можете дополнительно форматировать оси выход через dateFormats собственности, как упоминалось ранее. В этом случае вы захотите изменить строку в периоде fff. В зависимости от объема данных вам может потребоваться изменить более длительные периоды.

источник

2017-01-26 14:12:11 xorspark

Данные временной отметки с использованием Javascript

ответ

Смежные вопросы