Làm cách nào để đặt phạm vi màu trong Biểu đồ Google?

Question

Tôi đã tạo một ColumnChart và có hai thanh. Làm cách nào tôi có thể đặt các màu khác nhau trên hai thanh này?

tôi hiện chỉ có thể thiết lập một màu cho tất cả các quán bar,

Đây là một phần của mã tôi sử dụng:

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); 

Mục đích với colors: ['#b2cedc', '#7b7b7b','#b2cedc', '#7b7b7b'] là để thiết lập màu sắc bắt đầu cấp cho bar1 và bar 2. Nhưng tất cả những gì tôi làm, là sử dụng màu đầu tiên được xác định.

Và có cách nào để chagne màu nền thông qua các tùy chọn không?

đang thử nghiệm cho công cụ Visualization

Cắt và dán vào 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

Bạn không cần lặp lại mã màu, nó sẽ lặp lại bộ bạn đã đặt.

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

Bạn cũng có thể chỉ cho phép thiết bị sử dụng mặc định, bộ màu này sẽ được đặt riêng nếu bạn không cầu kỳ về màu sắc.

Màu nền được thay đổi thông qua backgroundColor. Phải mất một chuỗi như 'màu đỏ' hoặc '# b2cedc'

Có một số đẹp tool bạn có thể chơi cùng để kiểm tra mã của mình khi đang di chuyển. Mã màu ở trên được chèn sau sau width:600, height:400, màu sắc trong mọi dòng khác giống như vậy.

This documentation cũng có thể hữu ích.

Answer 2

Vấn đề có vẻ là bạn chỉ nhập một mục nhập, Áo, với nhiều điểm dữ liệu. colors đặt màu cho mỗi mục nhập, không phải từng điểm dữ liệu của mỗi mục nhập. Biểu đồ không có tùy chọn tôi có thể tìm thấy nhiều màu điểm dữ liệu.

Để xem những gì tôi có nghĩa là thay đổi:

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

để

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

Answer 3

đang Rất hữu ích: tôi tìm thấy nó ở đây. 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; 
     } 
     } 
     } 
    }