Как установить цветовую гамму в 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 устанавливает цвет для каждой записи, а не точки данных каждой записи. Диаграмма не имеет опции, которую я могу найти для нескольких цветов точек данных.

Чтобы понять, что я имею в виду, измените:

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

до

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

Answer 2

Очень полезный код: я нашел его здесь. 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;
         }
       }
      }
    }

Answer 3

Вам не нужно повторять цветовые коды, он будет повторять набор, который вы ему дадите.

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

Вы также можете просто позволить ему использовать значение по умолчанию, которое даст отличный набор цветов, если вы не требовательны к цветам.

Цвет фона изменяется с помощью backgroundColor. Требуется строка типа 'red' или '# b2cedc'

Есть хороший инструмент , с которым вы можете поиграть, чтобы проверить свой код на лету. Приведенный выше цветовой код вставляется после width:600, height:400, цветов в каждой строке, как и должно быть.

Эта документация также может быть полезна.