Блог

Главная - Вопросы по программированию - Highcharts неправильно визуализирует данные диаграммы после масштабирования или использования навигатора

Highcharts неправильно визуализирует данные диаграммы после масштабирования или использования навигатора

#highcharts #highstock

#highcharts

Вопрос:

Я использую highstock с четырьмя осями YAXI. Каждая ось содержит ряд с более чем 400 точками. Изначально диаграмма правильная, но как только вы делаете малейшее масштабирование или немного перемещаете навигатор, вся диаграмма меняется. Линии соединяются там, где не должны, ось yAxis, похоже, повреждена, и точки данных больше не учитываются.

Результат: диаграмма, показывающая совершенно неправильные данные.

Это становится особенно раздражающим при использовании неупорядоченной оси xAxis, хотя это и не требуется для появления ошибки.

Ожидаемый вид (без масштабирования или измененной навигации): Правильные данные после загрузки

После использования навигатора точки соединены, оси координат изменены без необходимости, и ожидаемые пробелы больше не видны: Неправильно отображаемые ряды после использования навигатора

Ошибка не возникает с тремя осями или если все ряды расположены на одной оси. Похоже, что это также зависит от высоты и ширины диаграммы.

У меня есть JSFiddle для демонстрации. В этом коде нет ничего особенного. В основном:

 $(function () {
    $('#container').highcharts('StockChart', {
        chart: {
            zoomType: 'xy'
        },
        xAxis: {
            ordinal: false
        },
        yAxis: [{ 
            labels: {
                format: '{value}°C'
            },
            title: {
                text: 'Temperature1'
            }
        }, {
            title: {
                text: 'Temperature2'
            },
            labels: {
                 format: '{value}°C'
            }

        }, { 
            title: {
                text: 'Temperature3'
            },
            labels: {
               format: '{value}°C'
            }
        }, {
            title: {
                text: 'Temperature4'
            },
            labels: {
               format: '{value}°C'
            }
        }],
        series: [{
            name: 'Temp1',
            type: 'line',
            yAxis: 0,
            data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
        }, {
            name: 'Temp2',
            type: 'line',
            yAxis: 1,
            data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
        }, {
            name: 'Temp4',
            type: 'line',
            yAxis: 3,
            data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
        }, {
            name: 'Temp3',
            type: 'line',
            yAxis: 2,
            data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
        }]
    });
});

Ответ №1:

Похоже, это зависит от dataGrouping опций.

Отключите dataGrouping , и, похоже, все работает нормально.

Код:

 plotOptions: {
  series: {
    dataGrouping: {
      enabled: false
    }
  }
}

Обновленный fiddle:

Ссылка: