Highcharts не отображает серии с большим количеством точек данных

У меня есть диаграмма, которую я хотел бы отображать на основе диапазона дат от пользователя. Эта конкретная диаграмма имеет точку данных каждые 15 минут. Таким образом, для каждой серии может быть множество точек данных, если пользователи выбирают большой диапазон дат. Вот несколько примеров:

В первом примере диаграмма отображается. Во втором примере диаграмма не отображается. Существует демонстрация Highstock (52 000 точек с группировкой данных), которая работает с большим количеством точек данных. Я попытался изменить приведенные выше диаграммы на диаграмму высот и все еще иметь те же результаты.

Что я могу сделать, чтобы исправить это?

Ответ 1

Это связано с параметром turbo threshold:

"Когда серия содержит массив данных, который длиннее этого, только один мерных массивов чисел или двухмерных массивов с x и y значения допустимы. Кроме того, проверяется только первая точка, а остальные считаются одинаковыми. Это экономит дорогостоящую проверку данных и индексирование в длинных рядах".

По умолчанию установлено 1000 точек. Ваша диаграмма не отображается, потому что каждая точка в вашей серии является объектом, а их число больше порога.

Здесь jfFiddle, демонстрирующий ваш график, работающий с порогом, установленным в 2000.

Здесь изменен раздел кода:

plotOptions: {
     spline: {
     turboThreshold: 2000,
    ...

Другим решением будет кодирование ваших данных серии в двухмерном массиве вместо того, чтобы каждая точка представляла и объект с x-y свойствами.

Ответ 2

Обходной путь для turboThreshhold - это что-то вроде этого, если вы генерируете ответ с PHP:

                    if(count($responseObj) > 1000){
                    $modolo = round(count($responseObj) / 1000);
                    for($i = count($responseObj)-1; $i >= 0 ; $i--){
                        if(($i % $modolo) != 0){
                            unset ($responseObj[$i]);
                        }
                    }
                    $responseObj = array_merge($responseObj);
                }