Biểu đồ Google - Thay đổi màu thanh cá nhân

Question

Với biểu đồ thanh Google Biểu đồ, có thể thay đổi màu của một thanh. Ví dụ tôi muốn làm cho dữ liệu năm 2006 màu đỏ (các thanh khác là màu xanh dương).

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

Answer 1

Đây là mẫu mã thay đổi màu sắc. Lưu ý rằng tùy chọn "màu sắc" chấp nhận một chuỗi các chuỗi.

var options = { 
     title: 'Company Performance', 
     hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}, 
     colors: ['red','green'], 
     is3D:true 
}; 

Answer 2

Bạn luôn có thể chèn thêm cột và do đó nó sẽ có màu khác. Đó là tất cả những gì có thể được thực hiện tôi đoán.

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

Answer 3

Như Naveen đề nghị, bạn nên thêm loạt khác để làm cho nó sử dụng một màu sắc khác nhau, tuy nhiên nếu bạn thêm isStacked: true đến lựa chọn của bạn nó sẽ thu hút thanh trên đầu trang của mỗi khác thay vì bên cạnh nhau và sẽ không thay đổi chiều rộng hoặc căn chỉnh của chúng, vì vậy có vẻ tốt. Hãy thử điều này:

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}] 
          }); 
} ​ 

Answer 4

loạt mảng của các đối tượng, hoặc đối tượng với các đối tượng lồng nhau

Một mảng của các đối tượng, từng mô tả định dạng của loạt tương ứng trong biểu đồ. Để sử dụng các giá trị mặc định cho một chuỗi, chỉ định một đối tượng rỗng {}. Nếu một chuỗi hoặc giá trị không được chỉ định, giá trị toàn cầu sẽ được sử dụng. Mỗi đối tượng hỗ trợ các thuộc tính sau:

màu - Màu để sử dụng cho chuỗi này. Chỉ định chuỗi màu HTML hợp lệ. targetAxisIndex - Trục nào để chỉ định chuỗi này, trong đó 0 là trục mặc định và 1 là trục đối diện. Giá trị mặc định là 0; đặt thành 1 để xác định biểu đồ trong đó các chuỗi khác nhau được hiển thị dựa trên các trục khác nhau. Ít nhất một chuỗi được phân bổ cho trục mặc định. Bạn có thể xác định thang đo khác nhau cho các trục khác nhau.

visibleInLegend - Giá trị boolean, trong đó có nghĩa là chuỗi phải có mục nhập chú giải và sai nghĩa là không nên nhập. Mặc định là đúng. Bạn có thể chỉ định hoặc là một mảng đối tượng, mỗi đối tượng trong số đó áp dụng cho chuỗi theo thứ tự đã cho hoặc bạn có thể chỉ định đối tượng trong đó mỗi đứa trẻ có một phím số cho biết chuỗi ứng dụng nào được áp dụng. Ví dụ, hai tờ khai sau giống hệt nhau, và tuyên bố hàng loạt đầu tiên là màu đen và vắng mặt từ truyền thuyết, và thứ tư là màu đỏ và vắng mặt từ truyền thuyết:

series: {0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false}} 

Answer 5

Tham khảo https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

Bạn có thể thêm {role: 'style'} vào bảng dữ liệu của bạn. Đối với tất cả các cột mà bạn muốn có cùng một màu, chỉ cần chỉ định một kiểu trống ''. Sau đó, trên cột bạn muốn trở thành màu đỏ, bạn có thể chỉ định 'đỏ' hoặc '# ff0000' hoặc 'color: red', vv

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

Answer 6

tôi giải quyết vấn đề này sử dụng kỹ thuật đóng vai trò phong cách bây giờ cho bảng xếp hạng tạo dữ liệu động, tôi đã sử dụng một chức năng ngẫu nhiên để tạo màu

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