Соединение соседних точек

Для диаграмм HighCharts добавлена возможность соединения непрерывной линией только соседних точек.

Для включения данной возможности используется атрибут gapsAsNulls элемента series.

Комментарии

Если между двумя точками в данных есть пропуск, то при равенстве атрибута gapsAsNulls значению true линия между ними не рисуется. Иначе - рисуется.

Пример

Для выполнения примера необходимо создать html-страницу и выполнить следующие действия:

1. Добавить ссылки на библиотеки PP.js, jquery.js и highcharts.src.js.

2. Внутри тега <body> разместить блок с идентификатором «container»:

<div id="container"></div>

3. Далее на страницу внутри тега <body> необходимо добавить сценарий, размещающий на странице линейную диаграмму, у которой непрерывной линией соединяются только соседние точки:

<script type="text/javascript">
$(function () {
    highChart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'line',
            zoomType: 'none'
        },
        title: {
            text: 'Линейная диаграмма'
        },
        yAxis: {
            title: {
                text: "Ось значений"
            }
        },
        // Определим ряд данных
        series: [{
            name: 'Ряд 1',
            data: [{
                x: 1,
                y: 1
            }, {
                x: 2,
                y: 3
            }, {
                x: 4,
                y: 1
            }, {
                x: 5,
                y: 3
            }],
            gapsAsNulls: true // Соединяем только соседние точки
        }]
    });
});
</script>

После выполнения примера на html-странице была размещена линейная диаграмма, у которой непрерывной линией соединяются только соседние точки:

См. также:

Размещение диаграммы HighCharts на html-странице | Элемент series | Доработки HighCharts | Примеры