谷歌ColumnChart的不同顏色

我想繪製一個數據來自php代碼作爲數組傳遞到繪圖函數的圖形。顏色顯示我是否使用PieChart，但不顯示ColumnChart。我怎樣才能讓酒吧顯示不同的顏色？谷歌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數據= google.visualization.arrayToDataTable（[[ '百分比' ，''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因爲它造成的佈局問題用我的長標籤：

來源

2015-09-07 Ken.Fukizi

什麼產生的餅圖和條形圖是什麼樣子？你能分享一些虛擬輸入數據嗎？ – dmh

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]]）; –

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，紅，黃，綠，藍']，axisFontSize：12，title：'2. Leadership Management＆Communication'}）; } –

您通過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/

來源

2015-09-07 14:40:35

感謝您的回答......但是我的問題實際上是由於我從數據庫表中動態選取標籤值而引起的。它們被傳遞到數組中，然後如上所示進行回顯（print「[」。$ js_array。「]」;）。標籤不是靜態的。我希望你能理解我？ –

當你需要不同顏色的行時，你必須根據需要提供數據，所以你需要修改PHP腳本的輸出 –

好的，謝謝......但是有什麼我失蹤了嗎？如果我只是簡單地將'var chart = new google.visualization.ColumnChart'更改爲'var chart = new google.visualization.PieChart'，顏色顯示在餅圖上，就像...爲什麼它不適用於ColumnChart？ –

谷歌ColumnChart的不同顏色

回答

相關問題