在谷歌条形图中为单个条形着色答案

【问题标题】：Color individual bar in google bar chart在谷歌条形图中为单个条形着色
【发布时间】：2014-03-25 17:49:55
【问题描述】：

我有一个从 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);

【问题讨论】：

标签： javascript php json google-api bar-chart

【解决方案1】：

1) 一种方法。

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

Google api 允许在编写脚本以启用和绘制图表时自定义条形图颜色。选项有不同的属性可以自定义。以上代码需要在绘制图表时添加到代码的脚本块中。我建议通过以下链接。

2) 另一个由 google 推荐。

有三种不同的颜色选择方式，数据表一一展示：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 获取包含一些优秀示例的文档。

【讨论】：