如何使用兩個yAxis刪除高圖表圖中的間隙

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/ - 打開收入 - 您將看到第一列和最后一列將被切斷。

Answer 2

這樣做的原因是，即使系列在加載時隱藏，您也有一個需要顯示寬度的列系列。 如果您只顯示系列“收入”，您可以看到它正在使用之前存在的空白空間。 你也可以使用tickPixelInterval - 但為此你不需要使用分類的xAxis。

看這個例子 。 我還為兩個yAxis元素將showEmpty設置為false。

Answer 3

如果您更改系列的最后一個

    type: 'column',

至

    type: 'areaspline',

左右兩側沒有間隙。 你需要型號column嗎？

此處回答了您的問題的解決方案Highcharts用戶Dusty 在x軸上刪除空間 。 您必須為x軸設置：

    min: 0.5,
    max: 10.5,

注意：如果您將column類型系列變為visible: true將切斷第一列和最后一列的一半。