在高图表中无法将y轴设置为100

Question

我配置了一个高图表图表，其中im显示perentage show中的数据我想将y轴设置为100.但是它已经设置为150.需要从150 y轴值更改100。 代码

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 link https://jsfiddle.net/fzumnvs5/

Answer 1

添加此简单代码yAxis: {min: 0, max: 100},

https://jsfiddle.net/2e7b3f4f/

请参阅小提琴，因为您无法真正看到代码段上的颜色变化。

＆＃13;

＆＃13;

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'
        }
    });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;