さまざまな色のGoogleグラフバー

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の配列すべての色を参照するためのデータテーブル内の文字列配列に

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

各色は、それぞれ直列、またはカラムに割り当てられる、
（x軸後）

は、あろうolor 4つのシリーズカラム

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'を使用する必要があります

'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>