我正在使用JavaScript API对Google图表进行样式设置。我想要改变数据绘制区域的背景。但是当我像这样设置背景选项时：
chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })
它会更改整个图表的背景，而不是数据绘制区域的背景。有什么想法可以只更改绘制区域的背景吗？ 谢谢
谷歌图表背景颜色
46
- firebait
9个回答
71
像这样传递选项
var options = {
title: 'title',
width: 310,
height: 260,
backgroundColor: '#E4E4E4',
is3D: true
};
- uma shankar pandey
19
将此添加到您的选项中：
'chartArea': {
'backgroundColor': {
'fill': '#F4F4F4',
'opacity': 100
},
}
- Kris Lamote
11
正确的答案是，这取决于是经典版Google Charts还是Material版Google Charts。如果您使用Google Charts的经典版本，则上面提到的多种建议都有效。但是，如果您使用更新的Material类型的Google图表，则必须以不同的方式指定选项，或转换它们（请参见下面的google.charts.Bar.convertOptions(options)）。此外，在材料图表的情况下，如果您为整个图表指定不透明度，则不透明度仅不会应用于图表区域。因此，即使是相同的颜色组合，您也需要显式地为图表区域指定带有不透明度的颜色。
总的来说：Google Charts的Material版本缺少一些经典版所具有的特性（斜角轴标签、趋势线、自定义列着色、组合图表等），反之亦然：只有材料版本支持数字格式化和双（三、四倍，...）轴。
如果某个功能在两个版本中都受支持，则Material图表有时需要不同的选项格式。
<body>
<div id="classic_div"></div>
<div id="material_div"></div>
</body>
JS：
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2009', 1120, 580],
['2010', 1200, 500],
['2011', 1250, 490],
]);
var options = {
width: 1000,
height: 600,
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017'
},
// Accepts also 'rgb(255, 0, 0)' format but not rgba(255, 0, 0, 0.2),
// for that use fillOpacity versions
// Colors only the chart area, simple version
// chartArea: {
// backgroundColor: '#FF0000'
// },
// Colors only the chart area, with opacity
chartArea: {
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.1
},
},
// Colors the entire chart area, simple version
// backgroundColor: '#FF0000',
// Colors the entire chart area, with opacity
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.8
},
}
var classicChart = new google.visualization.BarChart(document.getElementById('classic_div'));
classicChart.draw(data, options);
var materialChart = new google.charts.Bar(document.getElementById('material_div'));
materialChart.draw(data, google.charts.Bar.convertOptions(options));
}
- Csaba Toth
1
2正是我所需要的。只在图表区域中有背景颜色。谢谢 :) - Vishal Chhatwani
5
使用选项更容易。
drawChart() {
// Standard google charts functionality is available as GoogleCharts.api after load
const data = GoogleCharts.api.visualization.arrayToDataTable([
['Chart thing', 'Chart amount'],
['Na Meta', 50],
['Abaixo da Meta', 22],
['Acima da Meta', 10],
['Refugos', 15]
]);
let options = {
backgroundColor: {
gradient: {
// Start color for gradient.
color1: '#fbf6a7',
// Finish color for gradient.
color2: '#33b679',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
x1: '0%', y1: '0%',
x2: '100%', y2: '100%',
// If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
useObjectBoundingBoxUnits: true
},
},
};
const chart = new GoogleCharts.api.visualization.ColumnChart(this.$.chart1);
chart.draw(data, options);
}
我正在使用Polymer，这就是为什么我使用this.$.cart1的原因，但你也可以使用selectedbyid，没问题。
- Emerson Bottero
1
这个例子展示了如何获取渐变，我曾经为此苦苦挣扎。 - Emerson Bottero
0
你只需要添加 backgroudColor: '你的颜色' 例如：
var options = {
title: 'title',
width: 300,
height: 200,
backgroundColor: '#fff',};
- Cleiton
-1
你可以只用 CSS 来实现：
#salesChart svg > rect { /*#salesChart is ID of your google chart*/
fill: #F4F4F4;
}
- Zahidul Islam Ruhel
-1
- amit jain
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接