Highcharts - 私はHighchartsを使用していると私はこの単純な棒グラフを持っているデータ

Question

から最大値にyAxis.maxを設定：データ内

最大値は27ですが、規模では40です。提供されたデータからyAxis.maxを最大値に設定するにはどうすればよいですか？この例では、40の代わりに27が使用されています。

正直言って私はこれらの値をグラフに表示する必要はありませんが、使用可能な高さの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を追加し、チャート上の値を気にしないと言う：偽があなたのために十分だろう。

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 { 
 
\t min-width: 310px; 
 
\t max-width: 800px; 
 
\t height: 400px; 
 
\t 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>