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 example）来解决此问题：

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

您可能要评估的其他一些选项是匹配的axis.startOnTick: false，可能是axis.maxPadding: 0，以避免创建边缘需要的标签，而chart.alignTicks: false则用于释放轴之间的连接。

另一种替代方法是更改刻度位置（axis.tickPositions或axis.tickPositioner），以使其与您的最小值和最大值更好地对齐。

或者您的第三个选择是更改轴的手动编码最大值（max: items.options.gravity_max + 0.01），以便它不会产生这样的标签间隙f.x。成为max: 1.074。

但是，我认为您最好的选择是使用startOnTick和endOnTick选项。

Highcharts中图线上方的空白区域

1 个答案: