如何使用两个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将切断第一列和最后一列的一半。