谷歌圖表條不同顏色

Question

我一直在閱讀和閱讀，但我無法找到解決方案。

下面是我的代碼，它的工作原理是100％，所有我想要做的就是讓每個酒吧有不同的顏色。

有人可以幫助我讓每個酒吧有不同的顏色嗎？

我還需要圖例爲30％，圖表爲70％。

PHP

$rows = array(); 
$flag = true; 
$table = array(); 
$table['cols'] = array(
    array('label' => 'NAME', 'type' => 'string'), 
    array('label' => 'VALUE', 'type' => 'number')); 
$rows = array(); 
while ($r = mysql_fetch_assoc($sth)) { 
    $temp = array(); 
    $temp[] = array('v' => (string) $r['NAME']); 
    $temp[] = array('v' => (int) $r['VALUE']); 
    $rows[] = array('c' => $temp); 
} 
$table['rows'] = $rows; 
$jsonTable = json_encode($table); 

的JavaScript：

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript"> 
google.load('visualization', '1', { 'packages': ['corechart'] }); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 
    var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>); 
    var options = { 
     title: 'Fund Value', 
     is3D: 'true', 
     colors: ["red"], 
     width: 800, 
     height: 600, 
     legend: { textStyle: { fontSize: 10 }} 
    }; 

    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 
</script> 

Answer 1

有幾個方法可以彩條

1）使用colors配置選項

這需要一個數組c的olor串

colors: ['cyan', 'magenta', 'yellow', 'lime'] 

陣列中的每個顏色，將被分配給每個系列，或列，在數據表中
（x軸之後）

看到所有的顏色，你會需要四個系列列

var data = new google.visualization.DataTable({ 
    cols: [ 
    {label: 'X', type: 'string'}, 
    {label: 'A', type: 'number'}, 
    {label: 'B', type: 'number'}, 
    {label: 'C', type: 'number'}, 
    {label: 'D', type: 'number'} 
    ], 
    rows: [ 
    {c:[{v: 'Total'}, {v: 1}, {v: 2}, {v: 3}, {v: 4}]} 
    ] 
}); 

---

2）使用'style'column role

一個'style'柱的作用是其他的數據表列，
下面要樣式

列的值可以是彩色串系列

var data = new google.visualization.DataTable({ 
    cols: [ 
    {label: 'X', type: 'string'}, 
    {label: 'Y', type: 'number'}, 
    {role: 'style', type: 'string'} 
    ], 
    rows: [ 
    {c:[{v: 'Category A'}, {v: 1}, {v: 'cyan'}]}, 
    {c:[{v: 'Category B'}, {v: 2}, {v: 'magenta'}]}, 
    {c:[{v: 'Category C'}, {v: 3}, {v: 'yellow'}]}, 
    {c:[{v: 'Category D'}, {v: 4}, {v: 'lime'}]} 
    ] 
}); 

注：'style'列角色不與圖例同步
如果您必須有圖例，請參閱 - >Example: Build custom legend

---

看到下面的工作片段，其中包括兩個選項...

google.charts.load('current', { 
 
    callback: function() { 
 
    drawChartColumns(); 
 
    drawChartRows(); 
 
    }, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChartColumns() { 
 
    var data = new google.visualization.DataTable({ 
 
    cols: [ 
 
     {label: 'X', type: 'string'}, 
 
     {label: 'A', type: 'number'}, 
 
     {label: 'B', type: 'number'}, 
 
     {label: 'C', type: 'number'}, 
 
     {label: 'D', type: 'number'} 
 
    ], 
 
    rows: [ 
 
     {c:[{v: 'Total'}, {v: 1}, {v: 2}, {v: 3}, {v: 4}]} 
 
    ] 
 
    }); 
 

 
    var options = { 
 
    colors: ['cyan', 'magenta', 'yellow', 'lime'], 
 
    legend: { 
 
     position: 'top' 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.BarChart(
 
    document.getElementById('chart_col') 
 
); 
 
    chart.draw(data, options); 
 
} 
 

 
function drawChartRows() { 
 
    var data = new google.visualization.DataTable({ 
 
    cols: [ 
 
     {label: 'X', type: 'string'}, 
 
     {label: 'Y', type: 'number'}, 
 
     {role: 'style', type: 'string'} 
 
    ], 
 
    rows: [ 
 
     {c:[{v: 'Category A'}, {v: 1}, {v: 'cyan'}]}, 
 
     {c:[{v: 'Category B'}, {v: 2}, {v: 'magenta'}]}, 
 
     {c:[{v: 'Category C'}, {v: 3}, {v: 'yellow'}]}, 
 
     {c:[{v: 'Category D'}, {v: 4}, {v: 'lime'}]} 
 
    ] 
 
    }); 
 

 
    var options = { 
 
    legend: { 
 
     position: 'top' 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.BarChart(
 
    document.getElementById('chart_row') 
 
); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div>COLUMNS</div> 
 
<div id="chart_col"></div> 
 
<div>ROWS</div> 
 
<div id="chart_row"></div>