Question

我想以不同的百分比更改条形图列的颜色。假设列图中有10列要表示。其中3个低于60％，5个高于60％，2个高于80％。低于60％的色谱柱应选择绿色，高于60％的色谱柱应选择琥珀色，高于80％的色谱柱应选择红色。请帮帮我......

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script>
$(function () {
    var chart;
   var input = [34.4, 62.5, 80.1, 70, 69.6, 69.5, 89.1, 68.4, 18,
                    17.3],
    data = [],
    categories = ['orcl1 ','orcl2 ','orcl3 ','orcl4 ','orcl5 ','orcl6 ','orcl7 ','orcl8 ','orcl9 ','orcl10 '];
    $.each(input, function(index, value){
        var color;
        if (value > 80) color = 'red';
        else if (value > 60) color = 'Orange';
        else color = 'green';
        data.push({y:value, color: color, url:'https://www.google.com'});
    });

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'COL',
                type: 'column'
            },
            title: {
                text: 'Current Top 10 CPU Consumers',
                    style: {fontSize: '10px'}
            },
            xAxis: {
                categories: categories,
                labels: {
                    rotation: -35,
                    align: 'center'
                }
            },
           yAxis: {
                title: {
                    text: 'Percentage',
                    style: {fontSize: '11px'}
                }
            },
            exporting: { enabled: false },
             legend: {
                enabled: false,
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b>' +'- Oracle User Process CPU Consumed :'+'<b>'+ this.y +' % ' +'</b>' ;
                }
            },
       plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            location.href = this.options.url;
                        }
                    }
                }
            }
        },
                series: [{
                name: 'CPU Consumed',
                pointWidth: 28,
                data: data

            }]
        });
    });
});


        </script>
    </head>
    <body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="COL" style="min-width: 100px; height: 300px; margin: 0 auto"></div>

    </body>
</html>

Answer 1

您需要预处理数据以分配颜色。像这样：

var input = [34.4, 62.5, 80.1, 70, 69.6, 69.5, 89.1, 68.4, 18,
                17.3],
data = [];
$.each(input, function(index, value){
    var color;
    if (value > 80) color = 'red';
    else if (value > 65) color = 'yellow';
    else color = 'green';
    data.push({y:value, color: color});
});

http://jsfiddle.net/btwCb/

如何在高图中以不同的百分比水平更改柱形图中条形的颜色

1 个答案: