Не отображаются графики

122
15 августа 2019, 13:20

В 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>

Answer 1

Обратите внимание на событие загрузки данных 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 вызывается два раза к текущему времени, а не берется одно начальное.

READ ALSO
Webpack 4 output CSS to different folders

Webpack 4 output CSS to different folders

Не получается при билде поместить CSS в отдельную папкуЗнаю проблему совместимости webpack 4 и extract-text-webpack-plugin

92
create group objects in loop

create group objects in loop

подскажите пожалуйста как быть в таком случае: Есть ф-ия(конструктор, возвращающая объект);Как мне создавать объект в цикле присваивая...

118
Сохранение динамического контента

Сохранение динамического контента

столкнулся с такой проблемой:

113
Как очистить кеш для отдельных сайтов во всех современных браузерах?

Как очистить кеш для отдельных сайтов во всех современных браузерах?

Как очистить кеш js файлов для отдельных доменов во всех современных браузерах?

95