Google Chart Background

Question

В моей программе 2 гуглчарта:

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);


		var matrix = [];
		for(var i=0; i<50; i++) {
		matrix[i] = new Array(2);
		}
		var j=0;
$.getJSON("x.json",function(data){
		$.each(data, function(key, val){
			matrix[j][0]=(val.y);
			matrix[j][1]=(val.z);
			j++;
		});	
	});

// Draw the chart and set the chart values
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['a', 'b'],
  [matrix[0][0], matrix[0][1]],
  [matrix[1][0], matrix[1][1]],
  [matrix[2][0], matrix[2][1]],
  [matrix[3][0], matrix[3][1]],
  [matrix[4][0], matrix[4][1]]
]);
// Set chart options
      var options = {'title':'h',
                     'width':900,
                     'height':400,
					 is3D: true,
					 
					 };

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
		var matrix = [];
		for(var i=0; i<50; i++) {
		matrix[i] = new Array(2);
		}
		var j=0;
		
		
$.getJSON("x.json",function(data){
		$.each(data, function(key, val){
			matrix[j][0]=(val.y);
			matrix[j][1]=(val.z);
			j++;
		});	
	});
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        [matrix[0][0], matrix[0][1], "red"],
        [matrix[1][0], matrix[1][1], "yellow"],
        [matrix[2][0], matrix[2][1], "green"],
        [matrix[3][0], matrix[3][1], "grey"]
		
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "k",
        width: 800,
        height: 300,
        bar: {groupWidth: "95%"},
        legend: { position: "none" }
		
		

		
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
	  <!--options-->
  }
  </script>
<div id="columnchart_values" style="width: 900px; height: 800px; display: inline-block;"></div>

	 </div>

Я хочу изменить цвет фона обоих.Я попробовал некоторые решения для изменения цвета фона, например, добавление цвета фона к опциям, добавление области диаграммы и использование метода chart.draw (data, google.charts.Bar.convertOptions (options)).Но график просто исчезает.Любое решение для этого?

Answer 1

Вы можете изменить цвет диаграммы Google. Для этого введите backgroundColor, например, с помощью своего кода:

  var options = {
      'backgroundColor': 'blue',
  };

  var chart = new 
  google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}

для первого кода фрагмента, этот рабочий цвет можно проверить в скрипка