我在 StackOverflow 上看到了一些以前的问题/答案 但这些答案中提供的代码似乎都不起作用 用我的图表: 这是我的代码:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Sales', 'Expenses'],
['January', 200, 150],
['February', 1170, 460],
['March', 660, 1120],
['April', 1030, 540],
['May', 1030, 540],
['June', 1030, 540]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: May-August',
backgroundColor: '#fcfcfc',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
html div 代码:
<div id="columnchart_material" style="width: 650px; height: 500px;"></div>
问题是我想将背景从白色更改为浅灰色 我似乎无法通过声明 backgroundColor: "#fcfcfc' 来使其工作 内部选项{}
是否有其他方法可以在该图表上声明背景颜色 我想也许我正在使用的图表类型无法改变它 背景颜色。
我还尝试将backgroundColor变量指定为函数(后跟大括号backgroundColor{ color: '#fcfcfc' } 但这在我的图表上也不起作用。
任何帮助将不胜感激。 谢谢
jsFiddle:http://jsfiddle.net/mtypsnqy/
最佳答案
首先,您将 backgroundColor: '#fcfcfc',
放置在错误的位置。您已在 chart:{}
内部定义了它,而您应该在任何对象外部或 chartArea
内部执行此操作,如下所示:
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: May-August'
},
backgroundColor: '#fcfcfc'
};
这将导致包含图表的整个 div 呈深灰色或如下所示:
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: May-August'
},
chartArea:{
backgroundColor: '#fcfcfc'
}
};
这只会导致两个轴内包含的区域被涂成红色。
最后你必须改变你的
chart.draw(data, options);
到
chart.draw(data, google.charts.Bar.convertOptions(options));
如 Bar Charts API page 上指定的那样.
我给你做了一个 fiddle 来玩一下,看看有什么不同:Link
关于charts - 谷歌图表改变背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31001967/