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：＆＃39; style＆＃39;到你的数据表。对于您想要具有相同颜色的所有列，只需指定一个空样式＆＃39;＆＃39;。然后，在您要成为红色的列上，您可以指定“红色”＆＃39;或者＆＃39;＃ff0000＆＃39;或者＆＃39;颜色：红色＆＃39;等

// 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}]
                             });
}

Answer 4

您可以随时插入额外的列，因此它将具有不同的颜色。这就是我猜的所有可以做到的。

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, {width: 400, height: 240, title: 'Company Performance',
                              vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
                              series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}]
                             });
}

Answer 5

系列对象数组或具有嵌套对象的对象

一组对象，每个对象描述图表中相应系列的格式。要使用系列的默认值，请指定一个空对象{}。如果未指定系列或值，则将使用全局值。每个对象都支持以下属性：

颜色 - 此系列使用的颜色。指定有效的HTML颜色字符串。 targetAxisIndex - 指定此系列的轴，其中0是默认轴，1是相反的轴。默认值为0;设置为1以定义图表，其中不同的系列针对不同的轴呈现。至少有一个系列被分配给默认轴。您可以为不同的轴定义不同的比例。

visibleInLegend - 布尔值，其中true表示系列应具有图例条目，false表示不应该。默认为true。您可以指定一个对象数组，每个对象都按照给定的顺序应用于系列，或者您可以指定一个对象，其中每个子项都有一个数字键，指示它应用于哪个系列。例如，以下两个声明是相同的，并将第一个系列声明为黑色且不在图例中，第四个系列为红色且不在图例中：

series: {0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false}}

Answer 6

我现在使用角色样式技术为生成动态数据的图表解决了这个问题我使用随机函数生成颜色

    function random_color_part() {
return str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT);
}

function random_color() {
return random_color_part() . random_color_part() . random_color_part();
}
then simply
$color=random_color();
print "['$rows[1]',$rows[2],'#$color'],\n";

Answer 7

以下是上述提示的示例

google.charts.load('current', { packages: ['corechart', 'bar'] })
google.charts.setOnLoadCallback(drawStacked)

function mt_rand (min, max) {
  var argc = arguments.length
  if (argc === 0) {
    min = 0
    max = 2147483647
  } else if (argc === 1) {
    throw new Error('Warning: mt_rand() expects exactly 2 parameters, 1 given')
  }
  return Math.floor(Math.random() * (max - min + 1)) + min
}

function dechex (d) {
  var hex = Number(d).toString(16)
  hex = '000000'.substr(0, 6 - hex.length) + hex
  return hex
}

function str_pad (str) {
  str += ''
  while (str.length < 3) {
    str = str + str
  }
  return str
}

function random_color_part () {
  // return str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', 1);
  return mt_rand(0, 255)
}

function random_color () {
  return 'rgb(' + random_color_part() + ',' + random_color_part() + ',' + random_color_part() + ')'
}

let $color = random_color()
// alert($color);

function drawStacked () {
  // var data = new google.visualization.DataTable();

  var data = google.visualization.arrayToDataTable([
    ['Element', 'Density', { role: 'style' }],
    ['cor-glenio-aleatoria', 8.94, random_color()], // RGB value
    ['cor-arlei-aleatoria', 10.49, random_color()], // English color name
    ['outra cor', 19.30, random_color()],

    ['outra cor fixa', 21.45, 'color: #e5e4e2' ] // CSS-style declaration
  ])

  var options = {
    title: 'Motivation and Energy Level Throughout the Day',
    isStacked: true,
    hAxis: {
      title: 'Time of Day',
      format: 'h:mm a',
      viewWindow: {
        min: [7, 30, 0],
        max: [17, 30, 0]
      }
    },
    vAxis: {
      title: 'Rating (scale of 1-10)'
    }
  }

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'))
  chart.draw(data, options)
}

https://jsfiddle.net/zeh3pn6d/2

Answer 8

只要其他人遇到与我相同的问题，就把它留在这里吧

我有一个类似的问题，我无法更改条形图中特定条的颜色。我按照文档所述做了，并在这里尝试了一些答案，但是没有任何效果。

结果是，我只需要将google.charts.Bar更改为google.visualization.ColumnChart。

Answer 9

var options = {

      colors: ['red','green', 'purple']

};

colors参数将仅接受数组如果我们使用此颜色，则必须确保为所有元素添加颜色。

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

9 个答案: