Google图表 - 更改单个条形图颜色

Question

使用Google Charts条形图,是否可以更改一个条形图的颜色.例如,我想将2006年的数据设为红色(其他条形图为蓝色).

 function drawVisualization() {
            // Create and populate the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Year');
            data.addColumn('number', 'Sales');

            data.addRows(4);
            data.setValue(0, 0, '2004');
            data.setValue(0, 1, 1000);

            data.setValue(1, 0, '2005');
            data.setValue(1, 1, 1170);

  /* NEED TO MAKE THIS BAR RED? */
            data.setValue(2, 0, '2006');
            data.setValue(2, 1, 1400);

            data.setValue(3, 0, '2007');
            data.setValue(3, 1, 1030);


            chart = new google.visualization.BarChart(document.getElementById('visualization'));
            chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                              vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
                             });
}

Answer 1

这是一个更改颜色的代码示例.请注意,"colors"选项接受字符串数组.

var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
      colors: ['red','green'],
      is3D:true
};

Answer 2

请参阅https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

您可以将{role:'style'}添加到数据表中.对于您想要具有相同颜色的所有列,只需指定一个空样式''.然后,在您希望为红色的列上,您可以指定"红色"或"#ff0000"或"颜色:红色"等.

// example from Google
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
]);

Answer 3

正如Naveen建议的那样,你应该添加另一个系列以使其使用不同的颜色,但是如果你添加isStacked: true到你的选项,它将在彼此的顶部绘制条形而不是彼此相邻,并且不会改变它们的宽度或对齐,所以它看起来不错.试试这个:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
            data.addColumn('string', 'Year');
            data.addColumn('number', 'Sales');
            data.addColumn('number', 'SalesMax');

            data.addRows(4);
            data.setValue(0, 0, '2004');
            data.setValue(0, 1, 1000);
            data.setValue(0, 2, 0);

            data.setValue(1, 0, '2005');
            data.setValue(1, 1, 1170);
            data.setValue(1, 2, 0);

  /* NEED TO MAKE THIS BAR RED? */
            data.setValue(2, 0, '2006');
            data.setValue(2, 1, 0);
            data.setValue(2, 2, 1400);

            data.setValue(3, 0, '2007');
            data.setValue(3, 1, 1030);
            data.setValue(3, 2, 0);


            var chart = new google.visualization.BarChart(document.getElementById('visualization'));
  chart.draw(data, {isStacked: true, width: 400, height: 240, title: 'Company Performance',
                              vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
                              series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}]
                             });
} ?