Пустое пространство над линиями графика в Highcharts

Question

Я использую Highcharts (Highstock) для визуализации диаграммы на моей странице.

Я указываю максимальное и минимальное значение для моей оси, но, несмотря на это, я получаю пустое пространство над графиком:

Вот как выглядят мои варианты:

var myChart = new Highcharts.Chart('container', {
    rangeSelector:{
        enabled: false
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: true,
    },
    yAxis: [{
        opposite: false,
        title: {
            text: 'Gravity'
        },
        min: 1,
        max: items.options.gravity_max + 0.01
    },
    {
        opposite: true,
        title: {
            text: 'Temperature (C)'
        },
        min: items.options.temperature_min - 1,
        max: items.options.temperature_max + 1
    }],
    navigator: {
        enabled: false,
    },
    scrollbar: {
        enabled: false
    },
    series: [{
        name: 'Temperature',
        data: items.temperature,
        dataGrouping: {
            enabled: true
        },
        yAxis: 1,
    }, {
        name: 'Gravity',
        data: items.specific_gravity,
        dataGrouping: {
            enabled: true
        }
    },
    {
        name: 'OG',
        data: items.original_gravity,
        dataGrouping: {
            enabled: true
        },
        dashStyle: 'dot',
        color: '#000'
    },
    {
        name: 'FG',
        data: items.final_gravity,
        dataGrouping: {
            enabled: true
        },
        dashStyle: 'dot',
        color: '#000'
    }]
});

Вот ссылка на скрипку с упрощенной версиейданные;http://jsfiddle.net/3eLrn61w/

Что вызывает это пустое пространство сверху и как мне от него избавиться?

Answer 1

Это связано с тем, что Highcharts по умолчанию будет пытаться начать и закончить ось на метке.Ваш текущий максимум составляет 1.071+0.01 (1.081).Это больше, чем контрольная точка метки 1.075, которая вызывает создание другой метки.

Это можно исправить, выполнив ( JSFiddle пример ):

yAxis: [{
    // ...
    endOnTick: false
}]

Несколько других опций, которые вы можете оценить, - это сопоставление axis.startOnTick: false, возможно axis.maxPadding: 0, чтобы избежать создания минимально необходимых меток, и chart.alignTicks: false для освобождения соединения между осями.

Anальтернативный подход также будет заключаться в изменении положения тиков (axis.tickPositions или axis.tickPositioner), чтобы они лучше соответствовали вашим минимальным и максимальным значениям.

Или ваш третий вариант - изменить максимальный код, указанный вручную.ось (max: items.options.gravity_max + 0.01), чтобы она не создавала такого разрыва между метками, например fx: max: 1.074.

Однако, я думаю, что ваша лучшая ставка может быть с опциями startOnTick и endOnTick.