谷歌條形圖中的顏色個別酒吧

我有一個從json獲取數據的谷歌條形圖。它是月度客戶流程圖，它顯示所有月份的日期和相應的客戶流量。現在，我想要顯示最大客戶流量的酒吧以藍色着色，其餘的酒吧都是灰色的。如：谷歌條形圖中的顏色個別酒吧

^ 
|  ... 
|-----Grey-------- 
|-----Blue------------ 
|-----Grey---------- 
|-----Grey-------- 
|-----Grey---------- 
|  ... 
|__________________________________>

這是JSON的一部分：這樣做的

$table = array(); 
$table['cols'] = array(
    /* define your DataTable columns here 
    * each column gets its own array 
    * syntax of the arrays is: 
    * label => column label 
    * type => data type of column (string, number, date, datetime, boolean) 
    */ 
    // I assumed your first column is a "string" type 
    // and your second column is a "number" type 
    // but you can change them if they are not 
    array('label' => 'Dates as in '.$mon, 'type' => 'string'), 
    array('label' => 'Revenue', 'type' => 'number') 
); 

$rows = array(); 
while($r = mysql_fetch_assoc($query)) { 
    $temp = array(); 
    // each column needs to have data inserted via the $temp array 
    $temp[] = array('v' => $r['date']); 
    $temp[] = array('v' => (int) $r['amount']); // typecast all numbers to the appropriate type (int or float) as needed - otherwise they are input as strings 

    // insert the temp array into $rows 
    $rows[] = array('c' => $temp); 
} 

// populate the table with rows of data 
$table['rows'] = $rows; 

// encode the table as JSON 
$jsonTable = json_encode($table);

來源

2014-03-25 Divyang

1）的一種方式。

var options = { 
    legend: { position: 'bottom', maxLines: 3 }, 
    bar: { groupWidth: '50%' }, 
    colors:[{color:'#FF9900', darker:'#FF9900'},{color:'#3366CC', darker:'#3366CC'},{color:'#DC3912', darker:'#DC3912'}] 
    };

谷歌API允許同時寫劇本，使並繪製charts.options有不同的屬性來定製自定義條形圖的顏色。繪製圖表時，需要在代碼的腳本塊中添加上面的代碼。我會建議通過以下鏈接。

2）其他和谷歌推薦。

有三種不同的方式來選擇顏色，以及數據表展示了他們全部：RGB值，英語顏色名稱和CSS類聲明：

var data = google.visualization.arrayToDataTable([ 
    ['Element', 'Density', { role: 'style' }], 
     ['Copper', 8.94, '#b87333'],   // RGB value 
    ['Silver', 10.49, 'silver'],   // English color name 
    ['Gold', 19.30, 'gold'], 
    ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration 
     ]);

爲進一步造型

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Visitations', { role: 'style' } ], 
    ['2010', 10, 'color: gray'], 
    ['2010', 14, 'color: #76A7FA'], 
    ['2020', 16, 'opacity: 0.2'], 
    ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], 
    ['2040', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'], 
    ]);

Please refer here爲文檔與一些優秀的例子。

來源

2014-03-25 18:06:40 Daenarys

谷歌條形圖中的顏色個別酒吧

回答

相關問題