谷歌折线图 Colors？
[英]Google Line Chart Colors?
问题描述
I want to change the background color (into #262626) and font color (into white) in a Google Line Chart.
我想更改 Google 折线图中的背景颜色（变为 #262626）和字体颜色（变为白色）。 I would also like to hide a line by clicking a button.我还想通过单击一个按钮来隐藏一行。 Does anyone know how I could solve this?有谁知道我该如何解决这个问题？
I used this Chart: LineChart https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=de#creating-material-line-charts我使用了这张图表： LineChart https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=de#creating-material-line-charts
Thank you for Help:)谢谢你的帮助：）
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>
1 个解决方案
解决方案1
0 已采纳 2020-04-23 15:37:55
first, when using a material chart, need to convert the options to material options,首先，在使用材料图表时，需要将选项转换为材料选项，
using the following static method...使用以下 static 方法...
google.charts.Line.convertOptions(options)
as for background color, you can use the following option...至于背景颜色，您可以使用以下选项...
backgroundColor: {
fill: '#262626'
},
text color can be applied using the following options...可以使用以下选项应用文本颜色...
titleTextStyle: {
color: '#ffffff'
},
hAxis: {
textStyle: {
color: '#ffffff'
}
},
vAxis: {
textStyle: {
color: '#ffffff'
}
}
as for hiding a line, the following working snippet includes an example of clicking the legend entries to hide / show the line...至于隐藏一条线，下面的工作片段包括一个点击图例条目来隐藏/显示这条线的例子……
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.