Question

我想根据百分比自动更改列中的颜色。假设柱状图中有4列要表示，其中2列并排，另外2列也并排。颜色百分比分为3类，分别为30％，60％和90％。低于30％的列应该变成绿色，超过60％的列应该变成黄色，超过90％的列应该变成红色。 数据应该动态地从另一个地方获取。请帮助我。

请记住，结果不在堆栈列中，但是需要并排进行，就像这样，在2013年，该列上方有2个列，分别为名称4和5，等等。 < / p>

下面是我尝试过的代码。

HTML代码

<div class="row">
  <div class="col-lg-4 col-md-12 col-sm-12 mb-30">
    <div class="bg-white pd-30 box-shadow border-radius-5 xs-pd-20-10 height-100-p">
      <h4 class="mb-30">Nationwide Traffic Utilization</h4>
      <div id="BAU"></div>
    </div>
  </div>
</div>

高级图表代码

Highcharts.chart('BAU', {
            chart: {
                type: 'column'
            },
            colors: ['#11E117', '#FFC300', '#C00'],     //#209688 Green, #f9d47a Yellow, #f9d47a Red
            title: {
                text: ''
            },
            credits: {
                enabled: false
            },
            xAxis: {
                categories: ['A', 'B', 'C', 'D', 'E', 'F'],
                crosshair: true,
                lineWidth:1,
                lineColor: '#979797',
                title: {
                    text: 'Natiowide Regional Area'
                },
                labels: {
                    style: {
                        fontSize: '12px',
                        color: '#5a5a5a'
                    }
                },
            },
            yAxis: {
                min: 0,
                max: 100,
                gridLineWidth: 0,
                lineWidth:1,
                lineColor: '#979797',
                title: {
                    text: 'Traffic Utilization Percentage'
                },
                stackLabels: {
                    enabled: false,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                enabled: true
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    },
                    borderWidth: 0
                }
            },

            series: [{
                name: '&lt; 39% Utilize',
                maxPointWidth: 50,
                data: [50, 30, 40, 70, 20, 50,]
            }, {
                name: '&lt; 69% Utilize',
                maxPointWidth: 50,
                data: [0, 20, 30, 20, 10, 50,]
            }, {
                name: '&gt; 70% Utilize',
                maxPointWidth: 50,
                data: [50, 50, 30, 10, 70, 0,]
            }]
        });

我得到的当前结果

如何根据高图中的百分比在柱形图中自动更改颜色

0 个答案: