29

使用 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'}}
                             });
}
4

9 回答 9

37

这是一个更改颜色的代码示例。请注意，“颜色”选项接受字符串数组。

var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
      colors: ['red','green'],
      is3D:true
};
于 2012-08-09T07:00:53.060 回答
28

请参阅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
]);
于 2014-07-05T15:12:13.700 回答
6

正如 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}]
                             });
} ​
于 2012-05-31T15:24:23.940 回答
4 
var options = {

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

};

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

于 2019-11-03T12:32:25.140 回答
3

你总是可以插入一个额外的列，所以它会有不同的颜色。我想这就是所有可以做的。

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}]
                             });
}
于 2012-05-15T01:08:44.343 回答
1

series 对象数组，或具有嵌套对象的对象

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

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

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

series: {0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false}}
于 2013-08-19T03:00:47.833 回答
1

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

    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";
于 2017-04-04T13:29:04.220 回答
1

这是上述提示的示例

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
于 2019-06-13T21:45:30.387 回答
1

把这个留在这里，以防其他人遇到和我一样的问题：

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

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

于 2019-09-03T08:33:35.067 回答