我想在谷歌折线图中更改背景颜色(为#2262626(和字体颜色(为白色(。我还想通过单击按钮来隐藏一行。有人知道我该怎么解决这个问题吗？
我使用了此图表：折线图https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=de#creating-材料折线图
感谢您的帮助：(
var S1 = 81;
var S2 = 77;
var S3 = 71;
var S4 = 69;
var S5 = 92;
var S6 = 169;
var S7 = 218;
var S8 = 169;
var S9 = 0;
var S10 = 0;
var S11 = 0;
var S12 = 0;
var S13=0;
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Tag', 'Deine Preise', 'Verlauf 1', 'Verlauf 2', 'Verlauf 3'],
['Mon AM', S1, 150, 110, 100],
['Mon PM', S2, 140, 105, 90],
['Tues AM', S3, 130, 100, 78],
['Tues PM', S4, 120, 140, 60],
['Wed AM', S5, 110, 120, 100],
['Wed PM', S6, 100, 200, 140],
['Thur AM', S7, 90, 380, 180],
['Thur PM', S8, 80, 240, 130],
['Fri AM', S9, 70, 200, 90],
['Fri PM', S10, 60, 120, 78],
['Sat AM', S11, 50, 100, 60],
['Sat PM', S12, 40, 90, 57]
]);
var options = {
width: 1100,
height: 600,
colors: ['#2979FF','#FF7728','#E8471A','#FF2D1C'],
chart: {
title: 'Preis',
subtitle: 'Verlauf mit Bespielen',
},
}
var chart = new google.charts.Line(document.getElementById('curve_chart'));
chart.draw(data, options);
}body{
background: #262626;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="app.js">
</script>
</head>
<body>
<div id="curve_chart"></div>
</body>
</html>首先，当使用材质图表时，需要将选项转换为材料选项，
使用以下静态方法。。。
google.charts.Line.convertOptions(options)
至于背景颜色，您可以使用以下选项。。。
backgroundColor: {
fill: '#262626'
},
可以使用以下选项应用文本颜色。。。
titleTextStyle: {
color: '#ffffff'
},
hAxis: {
textStyle: {
color: '#ffffff'
}
},
vAxis: {
textStyle: {
color: '#ffffff'
}
}
关于隐藏一行，下面的工作片段包括一个单击图例条目以隐藏/显示该行的示例。。。
var S1 = 81;
var S2 = 77;
var S3 = 71;
var S4 = 69;
var S5 = 92;
var S6 = 169;
var S7 = 218;
var S8 = 169;
var S9 = 0;
var S10 = 0;
var S11 = 0;
var S12 = 0;
var S13 = 0;
var color = ['lime','cyan','magenta','yellow'];
google.charts.load('46', {
'packages': ['line']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Tag', 'Deine Preise', 'Verlauf 1', 'Verlauf 2', 'Verlauf 3'],
['Mon AM', S1, 150, 110, 100],
['Mon PM', S2, 140, 105, 90],
['Tues AM', S3, 130, 100, 78],
['Tues PM', S4, 120, 140, 60],
['Wed AM', S5, 110, 120, 100],
['Wed PM', S6, 100, 200, 140],
['Thur AM', S7, 90, 380, 180],
['Thur PM', S8, 80, 240, 130],
['Fri AM', S9, 70, 200, 90],
['Fri PM', S10, 60, 120, 78],
['Sat AM', S11, 50, 100, 60],
['Sat PM', S12, 40, 90, 57]
]);
var options = {
width: 1100,
height: 600,
colors: ['#2979FF', '#FF7728', '#E8471A', '#FF2D1C'],
chart: {
title: 'Preis',
subtitle: 'Verlauf mit Bespielen',
},
backgroundColor: {
fill: '#262626'
},
titleTextStyle: {
color: '#ffffff'
},
hAxis: {
textStyle: {
color: '#ffffff'
}
},
vAxis: {
textStyle: {
color: '#ffffff'
}
},
colors: ['cyan', 'yellow', 'magenta', 'lime']
}
var chart = new google.charts.Line(document.getElementById('curve_chart'));
var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
if (i > 0) {
series[i - 1] = {};
}
}
google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is null, we clicked on the legend
if (sel[0].row === null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
},
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
}
else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
options.series = series;
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, google.charts.Line.convertOptions(options));
}
}
});
chart.draw(data, google.charts.Line.convertOptions(options));
}body {
background: #262626;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="app.js">
</script>
</head>
<body>
<div id="curve_chart"></div>
</body>
</html>