javascript - 如何消除具有两个 y 轴的 highcharts 图形中的间隙

Question

我一直在尝试消除左侧的间隙，但没有任何作用。仅当我在右侧添加反向 yAxis 时才会出现此问题。下面是我正在使用的代码:

$(function () {
    var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    $('#container').highcharts({
        chart: {
            type: 'areaspline',
            zoomType: 'xy',
        },
        title: {
            text: 'Stats',
        },
        subtitle: {
            text: 'YTD 2013 - 2014',
        },
        xAxis: {
            labels: {
                enabled: true,
                formatter: function () {
                    return categories[this.value];
                }
            },
            tickInterval: 1,
            minPadding: 0,
            maxPadding: 0,
            startOnTick: true,
            endOnTick: true,
        },
        yAxis: [{ //--- Primary yAxis
            min: 0,
            minPadding: 0,
            maxPadding: 0,
            startOnTick: true,
            endOnTick: true,
            title: {
                text: 'Mds',
                style: {
                    color: '#8dc63f',
                }
            },
            labels: {
                style: {
                    color: '#8dc63f',
                    fontWeight: 'bold'
                }
            }
        }, { //--- Secondary yAxis


            labels: {
                formatter: function () {
                    var mil = '$';
                    return mil + Highcharts.numberFormat(this.value, 0);
                },
                style: {
                    color: '#3fb4ed',
                    fontWeight: 'bold'
                }
            },
            title: {
                text: 'Revenue',
                style: {
                    color: '#3fb4ed',
                }

            },
            opposite: true
        }],
        series: [{
            type: 'areaspline',
            color: '#005a84',
            fillOpacity: 0.2,
            yAxis: 0,
            zIndex: 3,
            name: 'Goals',
            data: [5, 5, 5, 5, 6, 8, 8, 8, 10, 10, 10, 10],
        }, {
            type: 'areaspline',
            color: '#8dc63f',
            fillOpacity: 0.2,
            yAxis: 0,
            zIndex: 4,
            name: 'This Year',
            data: [21, 14, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        }, {
            type: 'areaspline',
            color: '#d9531e',
            fillOpacity: 0.2,
            yAxis: 0,
            zIndex: 3,
            visible: false,
            name: 'Last Year',
            data: [20, 2, 2, 7, 8, 5, 7, 3, 2, 2, 5, 5],
        }, {
            type: 'column',
            color: '#3fb4ed',
            fillOpacity: 0.2,
            yAxis: 1,
            zIndex: 1,
            visible: false,
            name: 'Revenue',
            data: [1, 1, 1, 1, 1, 1, 1, 1, 3, 4, 4, 2]
        }]

    });
});

我已经尝试了所有可能的解决方案。浏览了 API 文档并搜索了每个论坛。任何帮助将不胜感激。

Answer 1

您可以设置 xAxis:

    xAxis: {
        labels: {
            enabled: true,
            formatter: function () {
                return categories[this.value];
            }
        },
        tickInterval: 1,
        minPadding: 0,
        maxPadding: 0,
        min: 0.5,                     // remove padding
        max: categories.length - 1.5, // remove padding
        startOnTick: false,           // allow to start not from tick
        endOnTick: false              // allow to end not at tick
    },

示例:http://jsfiddle.net/p2EYM/24/ - 打开收入 - 您将看到第一列和最后一列将被切断。