Highcharts - 将yAxis.max设置为数据的最大值

Question

我正在使用Highcharts，我有这个简单的条形图：

数据中的最大值是27，但是在规模上是40。如何从提供的数据中将yAxis.max设置为最大值？在这个例子中，27而不是40。

说实话，我甚至不需要图表上的那些值，但我想强制一个价值最大的栏占据100％的可用高度。

数据将动态提供，因此我不能手动设置最大值。

这是我目前的代码：

Highcharts.chart('container', {

  chart: {
    type: 'column',
    height: 150,
  },

  yAxis: {
    title: {
      text: null,
    },
    labels: {
      enabled: true,
    },
  },

  xAxis: {
    title: {
      text: null,
    },
  },

  credits: false,

  legend: false,

  title: {
    text: null,
  },

  series: [{
    data: [1, 0, 27, 7]
  }]
});

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

这是jsfiddle：http://jsfiddle.net/de3qfb3r/

Answer 1

你说你不关心图表上的值，所以也许添加endOnTick：false就足够了：

yAxis: {
    title: {
        text: null,
    },
    labels: {
        enabled: true,
    },
    endOnTick: false
}

Highcharts会自动计算最大值并使其适合可用高度。当endOnTick为true时（这是默认值），它会添加一个额外的空格来完成勾选

Answer 2

如果你手头有数据，你可以找到数组的最大值。这里的问题是，如果不添加勾选间隔，我无法使yAxis max工作。这是一个如何实现这一目标的例子。

var data = [1, 0, 27, 7];
var yMax = data.reduce(function(a, b) {
    return Math.max(a, b);
});

Highcharts.chart('container', {

    chart: {
        type: 'column',
        height: 150,
    },

    yAxis: {
        title: {
            text: null,
        },
        labels: {
            enabled: true,
        },
        tickInterval: 2,
        max: yMax
    },

    xAxis: {
        title: {
            text: null,
        },
    },

    credits: false,

    legend: false,

    title: {
        text: null,
    },

    series: [{
        data: data
    }]
});

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>