Question

我的程序中有2个googlecharts：

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

您可以通过在选项中输入backgroundColor来更改Google图表颜色，例如-使用您的代码-：

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

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

对于您的第一个代码段，您可以在fiddle中查看此工作颜色

Google图表背景

1 个答案: