Highcharts

Question

我在图表中添加了一些填充，因为我想控制实际图表和容器之间的 space，但我遇到了问题。首先查看 mi fiddle，一切似乎都是合法的，但未应用填充： https://jsfiddle.net/9r2Lqmpj/

Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        minPadding: 0.4,
        maxPadding: 0.4
    },
    yAxis: {
        startOnTick: false,
        minPadding: 0.2
    },
    series: [{
        data: [129.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

但是如果我复制“xAxis”键，这次没有类别数组，这似乎是非常错误的，没有理由它有效： https://jsfiddle.net/v0rj1xkg/

Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        minPadding: 0.4,
        maxPadding: 0.4
    },
    xAxis: {
        minPadding: 0.4,
        maxPadding: 0.4
    },
    yAxis: {
        startOnTick: false,
        minPadding: 0.2
    },

    series: [{
        data: [129.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

我完全没想到这会奏效，事实上，我无意中发现了它。为什么只有当我重复 xAxis 键定义时它才起作用？

Answer 1

嗯，奥古斯丁，在你的第二个场景中，不是什么发现，而是一个共同的逻辑。我不太确定你想要达到什么目的，但是没有必要定义 xAxis 两次。只需删除第一个即可获得相同的结果，因此看起来您的第二个正在覆盖第一个。看看你的 fiddle 这里 https://jsfiddle.net/xcmq869s/ 对我来说看起来一样。也可能是填充不适用于分类数据，因此在未指定类别时它可以正常工作。你当然可以用删除的类别改变填充。

另一方面，如果您想保留 x 轴标签并仅添加外部间距，请尝试使用 chart.spacing 配置选项，如 fiddle 此处 https://jsfiddle.net/xcmq869s/1/ .

Answer 2

属性 minPadding 和 maxPadding 不适用于类别轴类型。请改用 min 和 max 选项。

Highcharts.chart('container', {
    xAxis: {...},
    ...
}, function() {
    var xAxis = this.xAxis[0];
    this.update({
        xAxis: [{
            min: xAxis.min + 0.2,
            max: xAxis.max - 0.2
        }]
    }, true, true, false);
});

现场演示： https://jsfiddle.net/BlackLabel/96s30khd/

Highcharts - 轴 minPadding 和 maxPadding 不工作

Highcharts - Axis minPadding and maxPadding not working

padding