谷歌折線圖 Colors？
[英]Google Line Chart Colors?
問題描述
我想更改 Google 折線圖中的背景顏色（變為 #262626）和字體顏色（變為白色）。 我還想通過單擊一個按鈕來隱藏一行。 有誰知道我該如何解決這個問題？
我使用了這張圖表： LineChart https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=de#creating-material-line-charts
謝謝你的幫助：）
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
首先，在使用材料圖表時，需要將選項轉換為材料選項，
使用以下 static 方法...
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>
谷歌折線圖中的可變背景顏色
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.