Пример использования Highcharts с месячным шагом

Пример использования js-библиотеки highcharts для построения графиков с месячным шагом. Возможно кому-то пригодится.

<!DOCTYPE html>
<html lang="ru">
    <head>
	<meta charset="UTF-8">
    </head>
    <body>
 
 
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
 
 
<script>
 
var array = [
{
"name":"Москва, Говядина, кг",
"data":[[1472688000000,325.84],[1475280000000,325.84],[1477958400000,322.46],[1480550400000,322.46],[1483228800000,316.54],[1485907200000,310.81],[1488326400000,310.3],[1491004800000,310.3],[1493596800000,310.3],[1496275200000,317.85],[1498867200000,317.85],[1501545600000,312.77],[1504224000000,322.97]]
},
 
{
"name":"Санкт-Петербург, Говядина, кг",
"data":[[1472688000000,339.45],[1475280000000,339.45],[1477958400000,339.45],[1480550400000,339.45],[1483228800000,338.36],[1485907200000,338.36],[1488326400000,338.36],[1491004800000,337.31],[1493596800000,337.31],[1496275200000,337.31],[1498867200000,339.45],[1501545600000,339.45],[1504224000000,339.45]]
}
 
];
 
//console.log(array);
 
Highcharts.chart('container', {
 
    title: {
        text: 'Цены на продукты'
    },
    subtitle: {
        text: 'Источник данных'
    },
    xAxis: {
        type: 'datetime',        
    },
    yAxis: {
        title: {
            text: 'Цена в руб.'
        },
    },
    chart: {
    },
    legend: {
        align: 'center',
        verticalAlign: 'bottom',
    },
    series: array,
    exporting: { enabled: false },
});
 
Highcharts.setOptions({
    lang: {
        months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',  'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
        shortMonths: ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сент', 'Окт', 'Нояб', 'Дек']
    }
});
 
</script>
 
 
    </body>
</html>
  1. Нет комментариев