高チャートではy軸を100に設定できません

Question

高チャートグラフを設定しています。ここではperentageのデータを表示していますが、y軸を100に設定したいと思っていますが、 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>

の