В series один график нормально выполняется рандомно,а второй не работает . Где может быть ошибка?
Highcharts.setOptions({
global: {
useUTC: false
},
lang: {
loading: 'Загрузка...',
months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
weekdays: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
shortMonths: ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сент', 'Окт', 'Нояб', 'Дек'],
exportButtonTitle: "Экспорт",
printButtonTitle: "Печать",
rangeSelectorFrom: "С",
rangeSelectorTo: "По",
rangeSelectorZoom: "Период",
downloadCSV: 'Скачать CSV',
downloadXLS: 'Скачать XLS',
}
});
Highcharts.chart('chart1', {
chart: {
type: 'spline',
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 10);
series.addPoint([x, y], true, true);
}, 3000);
}
}
},
time: {
useUTC: false
},
title: {
text: 'Гистограмма 1',
style: {
color: 'black',
fontSize: '20px',
fontWeight: 'bold'
},
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
style: {
color: 'black',
fontSize: '15px',
fontWeight: 'bold'
},
title: {
text: null
},
//For time series, x-axis labels will be time
labels: {
style: {
color: 'black',
fontSize: '15px',
fontWeight: 'bold'
},
//You can format the label according to your need
format: '{value:%H:%M:%S}',
},
},
yAxis: {
"fontSize": '21px',
offset: 30,
color: 'black',
min: 0,
max: 10,
tickInterval: 1,
labels: {
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif',
fontWeight: 'bold',
}
},
title: {
text: ''
}
},
credits: {
enabled: false
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},
legend: {
enabled: true
},
series: [{
name: 'Значения1',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}, {
name: 'Значения2',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}, ]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="pag_ch1" style="width:100%;display: flex;align-items: center;justify-content: center">
<div id="chart1" style="height: 600px; width: 1800px;margin-top: 100px"></div><a href="#" class="but1">К ГРАФИКУ</a>
</div>
Обратите внимание на событие загрузки данных chart.events.load
, данные по таймеру добавляются только в первую серию.
chart: {
type: 'spline',
events: {
load: function() {
var series = this.series;
setInterval(function() {
var x = (new Date()).getTime(),
y = Math.round(Math.random() * 10);
y2 = Math.round(Math.random() * 10);
series[0].addPoint([x, y], true, true);
series[1].addPoint([x, y2], true, true);
}, 3000);
}
}
},
сохраните ссылку на массив серий в целом, и добавляйте значения в обе.
замечу, что в исходных данных серий, у вас там может случится, что точки двух серий будут попадать в разные секунды, так как getTime
вызывается два раза к текущему времени, а не берется одно начальное.
Виртуальный выделенный сервер (VDS) становится отличным выбором
Не получается при билде поместить CSS в отдельную папкуЗнаю проблему совместимости webpack 4 и extract-text-webpack-plugin
подскажите пожалуйста как быть в таком случае: Есть ф-ия(конструктор, возвращающая объект);Как мне создавать объект в цикле присваивая...
Как очистить кеш js файлов для отдельных доменов во всех современных браузерах?