Question

我创建了一个ColumnChart，它有两个小节。如何在这两个条上设置不同的颜色？

我目前只能为两个栏设置一种颜色，

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

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

var option = {
  title: 'Betalingsoppf&oslash;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设置每个条目的颜色，而不是每个条目的数据点。该图表没有我可以找到多种数据点颜色的选项。

看看我的意思是改变：

var raw_data = [['Austria', 150000, 225000]];

到

var raw_data = [['Austria', 150000, 225000],['Japan',100000,200000]];

Answer 2

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

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

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

背景颜色通过backgroundColor更改。它需要一个像'red'或'＃b2cedc'

这样的字符串

你可以使用一个很好的tool来动态测试你的代码。上面的颜色代码在width:600, height:400,颜色之后插入其他所有颜色的行中。

This documentation也可能会有所帮助。

Answer 3

非常有用的代码：我在这里找到了它。 https://groups.google.com/forum/?fromgroups=#!topic/google-visualization-api/jCVmevbBT4Q

   function drawVisualization() {
       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Year');
       data.addColumn('number', 'Sales');
       data.addColumn('number', 'Expenses');
       data.addRows(4);
       data.setValue(0, 0, '2004');
       data.setValue(0, 1, 1000);
       data.setValue(0, 2, 400);
       data.setValue(1, 0, '2005');
       data.setValue(1, 1, 1170);
       data.setValue(1, 2, 460);
       data.setValue(2, 0, '2006');
       data.setValue(2, 1, 660);
       data.setValue(2, 2, 1120);
       data.setValue(3, 0, '2007');
       data.setValue(3, 1, 1030);
       data.setValue(3, 2, 540);

    var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
    chart.draw(data, { width: 640, height: 480, title: 'Company Performance',
                     vAxis: { title: 'Year', titleTextStyle: { color: 'red'} },
                     legend: 'none', colors: ['#cc00cc', '#ccffcc']
                    });

    changeColors();

    }

    function changeColors() {
     var chartArea = document.getElementsByTagName('iframe')           [0].contentDocument.getElementById('chartArea');
      var nodes = chartArea.getElementsByTagName('rect');

       // finding all <rect> elements with #cc00cc fill color and replacing them with      'blue','red','green','blue'
       for (var i = 0; i < nodes.length; i++) {
    var node = nodes[i];
    if (node.getAttribute('fill') && node.getAttribute('fill') == '#cc00cc') {
      switch (i % 4) {
        case 0:
          node.setAttribute('fill', 'blue');
          break;
        case 1:
          node.setAttribute('fill', 'red');
          break;
        case 2:
          node.setAttribute('fill', 'green');
          break;
        case 3:
          node.setAttribute('fill', 'red');
          break;
        }
      }
    }

  // finding all <rect> elements with #ccffcc fill color and replacing them with 'blue','red','green','blue'
  for (var i = 0; i < nodes.length; i++) {
    var node = nodes[i];
    if (node.getAttribute('fill') && node.getAttribute('fill') == '#ccffcc') {
      switch (i % 4) {
        case 0:
          node.setAttribute('fill', 'blue');
          break;
        case 1:
          node.setAttribute('fill', 'red');
          break;
        case 2:
          node.setAttribute('fill', 'green');
          break;
        case 3:
          node.setAttribute('fill', 'red');
          break;
         }
       }
      }
    }

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

3 个答案: