Google 柱形图的不同颜色

Question

我正在尝试使用来自 php 代码的数据作为传递给绘图函数的数组来绘制图表。如果我使用的是 PieChart，而不是 ColumnChart，则会显示颜色。我怎样才能让条形图显示不同的颜色？

这是我的脚本：

<script type="text/javascript">
  google.load("visualization", "1.1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable(<?php 

    $baseText = '';
    $trimmedPercentbf = '';
$js_arraybf = "['Percentage','$baseText'],";

    $counter = 0;

    $getBasicFunctionality = [SQL Query Here];
        while ($basicFunctionality = dbfetch($getBasicFunctionality)):

            $baseTextbf = $basicFunctionality["sat_lower_level_text"];


    $weightsTotal = $basicFunctionality["total"];

            $average = $basicFunctionality["weightAVG"];
            $countTotal = $basicFunctionality["total_users"];

            $counter += $countTotal;

            $percentage = ($average)/5 * 100;
            $trimmedPercentbf = number_format($percentage, $decimals=2);




                    if($counter != $countTotal):
                        $sep = ",";
                    else:
                        $sep = ",";
                    endif;


                        $js_arraybf .= "[ '$baseTextbf', $trimmedPercentbf ]".$sep;


                endwhile;


                                    $js_array = rtrim($js_arraybf, ', ');

                print "[".$js_array."]";






    ?>);

    var chart = new google.visualization.ColumnChart(document.getElementById('community'));
    chart.draw(data, {width: 800, height: 800, is3D: true,/*vAxis: {format:'#%'},pieHole: 0.4,*/colors: ['#242424','#437346','#97D95C','#7D252B','#EB9781','#FFD2B5','#4A4147','#3796c8', 'red','yellow','green', 'blue'],axisFontSize:12, title: '2.Leadership Management & Communication'});
  }
</script>

// 从php代码中传过来的示例数据为数组如下： var data = google.visualization.arrayToDataTable([['Percentage',''],['label1',51.43],['label2',60.00],['label3',66.67] ,[ 'label4 ', 60.00 ],[ 'label5', 66.67 ],[ 'label7', 100.00 ],[ 'label8', 100.00 ],[ 'label9', 100.00 ] ,[ 'label10', 100.00 ],[ 'label11', 100.00 ],[ 'label12', 80.00 ],[ 'label13', 40.00 ]]);

//当前只有一种颜色的图如下：

//我需要图表看起来像下面我使用 jqbargraph 的图表，但不能使用 jq，因为它会导致我的长标签出现布局问题：

Answer 1

您通过 colors 选项定义的颜色适用于列。

当您想像您的情况一样为行设置颜色时，您必须通过样式列来完成，例如：

var data = new google.visualization.arrayToDataTable([
    ['Percentage', '',{ role: 'style' }],
    ['label1',  51.43, '#242424'],
    ['label2',  60.00, '#437346'],
    ['label3',  66.67, '#97D95C'],
    ['label4',  60.00, '#7D252B'],
    ['label5',  66.67, '#EB9781'],
    ['label7',  100.00,'#FFD2B5'],
    ['label8',  100.00,'#4A4147'],
    ['label9',  100.00,'#3796c8'],
    ['label10', 100.00,'red'],
    ['label11', 100.00,'yellow'],
    ['label12', 80.00, 'green'],
    ['label13', 40.00, 'blue']
]);

https://jsfiddle.net/qdaw7ssx/

Google 柱形图的不同颜色

Different Colors for Google ColumnChart

javascript

php

google-visualization