高圖-將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>