높은 차트에서 y 축을 100으로 설정할 수 없습니다

Question

저는 하나의 높은 차트 그래프를 구성합니다. 여기서 perentage의 데이터를 보여주는 im은 y 축을 100으로 설정하려고하지만 이미 150으로 설정되어 있습니다. 100을 150 y 축 값에서 계산합니다. 코드

var chart = Highcharts.chart('container', { 

    title: { 
     text: 'Bins Status' 
    }, 
    subtitle: { 
     text: 'Filled %' 
    }, 
    xAxis: { 
     categories: ['Bin1', 'Bin2', 'Bin3', 'Bin4', 'Bin5', 'Bin6', 'Bin7', 'Bin8', 'Bin9', 'Bin10'] 
    }, 
    series: [{ 
     type: 'column', 
     colorByPoint: false, 
     data: [22.3, 42.3, 96.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 92.3], 
     showInLegend: false 
    }], 
    legend: { 
     enabled: false 
    }, 
    plotOptions: { 
     series: { 
      borderWidth: 0, 
      dataLabels: { 
       enabled: true, 
       format: '{point.y:.1f}%' 
      } 
     } 
    }, 
}, function(chart) { 
    $.each(chart.series[0].data, function (i, data) { 
     if (data.y >= 70) 
      data.update({ 
       color: 'yellow' 
      }); 
     if (data.y >= 90) 
      data.update({ 
       color: 'red' 
       }); 

    }) 
}); 

jsfiddle 링크 https://jsfiddle.net/fzumnvs5/

Answer 1

에 추가하기이 간단한 코드, yAxis: {min: 0, max: 100},

https://jsfiddle.net/2e7b3f4f/

당신이 정말로 색상을 볼 수 없습니다로 바이올린을 참조하십시오 변화 스 니펫.

var chart = Highcharts.chart('container', { 
 

 
    title: { 
 
     text: 'Bins Status' 
 
    }, 
 
    subtitle: { 
 
     text: 'Filled %' 
 
    }, 
 
    xAxis: { 
 
     categories: ['Bin1', 'Bin2', 'Bin3', 'Bin4', 'Bin5', 'Bin6', 'Bin7', 'Bin8', 'Bin9', 'Bin10'] 
 
    }, 
 
    yAxis: {min: 0, max: 100}, 
 
    series: [{ 
 
     type: 'column', 
 
     colorByPoint: false, 
 
     data: [22.3, 42.3, 96.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 92.3], 
 
     showInLegend: false 
 
    }], 
 
    legend: { 
 
     enabled: false 
 
    }, 
 
    plotOptions: { 
 
     series: { 
 
      borderWidth: 0, 
 
      dataLabels: { 
 
       enabled: true, 
 
       format: '{point.y:.1f}%' 
 
      } 
 
     } 
 
    }, 
 
}, function(chart) { 
 
    $.each(chart.series[0].data, function (i, data) { 
 
     if (data.y >= 70) 
 
      data.update({ 
 
       color: 'yellow' 
 
      }); 
 
     if (data.y >= 90) 
 
      data.update({ 
 
       color: 'red' 
 
       }); 
 

 
    }) 
 
}); 
 

 
$('#plain').click(function() { 
 
    chart.update({ 
 
     chart: { 
 
      inverted: false, 
 
      polar: false 
 
     }, 
 
     subtitle: { 
 
      text: 'Plain' 
 
     } 
 
    }); 
 
}); 
 

 
$('#inverted').click(function() { 
 
    chart.update({ 
 
     chart: { 
 
      inverted: true, 
 
      polar: false 
 
     }, 
 
     subtitle: { 
 
      text: 'inverted' 
 
     } 
 
    }); 
 
}); 
 

 
$('#polar').click(function() { 
 
    chart.update({ 
 
     chart: { 
 
      inverted: false, 
 
      polar: true 
 
     }, 
 
     subtitle: { 
 
      text: 'Polar' 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.3/css/highcharts.css"> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="container" class="col-sm-6" style="height:300px;padding-right:0px;"> 
 
    </div> 
 
<div class="col-sm-6"> 
 
     <button id="plain">Plain</button> 
 
    <button id="inverted">Inverted</button> 
 
    <button id="polar">Polar</button> 
 
</div>

의