我想要做的就是将背景颜色更改为透明，但无论我在(太棒了!...)文档中的任何地方看到的选项组合如何，我什至根本无法更改颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title></title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: {
position: 'none'
},
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage'
},
bars: 'horizontal',
axes: {
x: {
0: {
side: 'top',
label: 'Percentage'
} // Top x-axis.
}
},
bar: {
groupWidth: "90%"
}
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>最佳答案
在options当然对于经典 GViz:
backgroundColor: {fill:'transparent'},
如果您使用的是 Material 测试版，这将不起作用
但以下内容适用于 Classic 和 Materials
- 制作
<style>在</head>的结束标记处阻止 - 添加此规则集:
rect { fill:transparent; }
OP 正在使用 Materials，它是 documented at the Materials Bar Chart section以下内容:
The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported in this issue.
Also, the way options are declared is not finalized, so you must convert your options by replacing this line:
chart.draw(data, options);...with this:
chart.draw(data, google.charts.Bar.convertOptions(options));
在片段 2 中可以清楚地看到我们确实可以使 GViz 图表背景透明。核心图形是 SVG，所以如果我们想以图形方式更好地控制我们的图表，我们需要了解一点 SVG。
片段 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>Basic GVis ChartWrapper Setup</title>
<style>
body {background:url(http://www.koolchart.com/images/background.jpg)no-repeat; background-size:cover;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></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 options = {
backgroundColor: {fill:'transparent'},
title: 'Google Visualization ChartWrapper Setup',
titleTextStyle: {
color: 'blue',
fontName: 'Arial',
fontSize: 22
},
hAxis: {
textStyle: {
color: '#993300'
},
title: 'Subjects',
titleTextStyle: {
color: '#993300',
fontName: 'Verdana',
fontSize: 22
}
},
vAxis: {
maxValue: 1000,
textStyle: {
fontName: 'Verdana',
color: '#993300'
},
title: 'A Quick Basic ChartWrapper Setup from a Remote Google Sheet Source',
titleTextStyle: {
color: 'blue',
fontName: 'Arial',
fontSize: 16
}
}
};
function drawChart() {
chart = new google.visualization.ChartWrapper();
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Place your URL within setDataSourceUrl(...HERE...)
chart.setDataSourceUrl('https://docs.google.com/spreadsheets/d/1_ljk07nqJf_A5tM5BJyVCHTc5Uw8jxBqdCDudJJgvmA/edit#gid=1248768532');
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
chart.setChartType('LineChart');
chart.setContainerId('chart');
chart.setOptions(options);
chart.draw();
}
</script>
</head>
<body>
<header>
<details>
<summary>
<p><a href='http://embed.plnkr.co/GKvadm3yOBYHJoOjisWs/'>Snippet</a> and <a href='http://plnkr.co/edit/GKvadm3yOBYHJoOjisWs?p=info'>README.md</a> file available at: Plunker.</p>
<p><a href='https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject'>ChartWrapper Reference</a>
</p>
</summary>
</details>
</header>
<section id="chart"></section>
</body>
</html>片段 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>G04B32</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
backgroundColor: {
fill: 'transparent'
},
title: 'Chess opening moves',
width: 900,
legend: {
position: 'none'
},
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage'
},
backgroundColor: {
fill: 'transparent'
},
bars: 'horizontal',
axes: {
x: {
0: {
side: 'top',
label: 'Percentage'
} // Top x-axis.
}
},
bar: {
groupWidth: "90%"
}
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
<style>
body {
background: url(http://previews.123rf.com/images/vitalli/vitalli1401/vitalli140100012/25204290-Chessboard-background-texture-Stock-Photo.jpg)no-repeat;
background-size: cover;
}
rect {
fill: transparent;
}
</style>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>关于javascript - 谷歌图表栏背景颜色不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40853291/