如何在Google Chart中设置颜色范围？

Question

我创建了一个ColumnChart它有两个栏.如何在这两个栏上设置不同的颜色？

我目前只能为两个酒吧设置一种颜色,

这是我使用的代码的一部分:

var d = [['', ''], ['Bar 1', 100], ['Bar 2', 300]]; 
data = new google.visualization.arrayToDataTable(d);    

var option = {
  title: 'Betalingsoppfølging',
  width: '300',
  height: '250',
  min:  '0',
  legend: 'none',
  colors: ['#b2cedc', '#7b7b7b','#e2e2e2', '#747c1f']
}

wrap.setOptions(option);
wrap.draw(data);

意图colors: ['#b2cedc', '#7b7b7b','#b2cedc', '#7b7b7b']是为bar1和bar 2设置起始颜色.但我所做的就是使用定义的第一种颜色.

有没有办法通过选项来挑选背景颜色？

可视化工具的测试代码

将其剪切并粘贴到Code Playground中.

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  var raw_data = [['Austria', 150000, 225000]];

  var years = [2003, 2004];

  data.addColumn('string', 'Year');
  for (var i = 0; i  < raw_data.length; ++i) {
    data.addColumn('number', raw_data[i][0]);    
  }

  data.addRows(years.length);

  for (var j = 0; j < years.length; ++j) {    
    data.setValue(j, 0, years[j].toString());    
  }
  for (var i = 0; i  < raw_data.length; ++i) {
    for (var j = 1; j  < raw_data[i].length; ++j) {
      data.setValue(j-1, i+1, raw_data[i][j]);    
    }
  }

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title:"Color testing",
            width:600, height:400,
            hAxis: {title: "Year"},
            colors: ['#dedb70', '#747c1f','yellow', 'red'],
            min: '0',
            legend: 'none'
           }
      );
}

Answer 1

您不需要重复颜色代码，它会重复您提供的设置。

colors: ['#b2cedc', '#7b7b7b']

如果您对颜色不挑剔，您也可以让它使用默认值，这将提供独特的颜色集。

背景颜色通过 更改backgroundColor。它需要一个像“red”或“#b2cedc”这样的字符串

有一个很好的工具可以用来动态测试您的代码。上面的颜色代码width:600, height:400,按照应有的方式插入到每隔一行的颜色后面。

该文档也可能会有所帮助。