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>