概览
某些 Google 图表(例如面积图、折线图和组合图表)包含连接数据点的折线。您可以使用此页面上的技巧自定义线条的颜色、粗细和虚线。
更改颜色
您可以通过两种截然不同的方式更改连接 Google 图表中的数据线的颜色:使用 colors
选项更改图表调色板,或使用 series
选项为特定系列指定颜色。
在下图中,我们明确设置了每个数据系列的颜色。
var options = { legend: 'none', series: { 0: { color: '#e2431e' }, 1: { color: '#e7711b' }, 2: { color: '#f1ca3a' }, 3: { color: '#6f9654' }, 4: { color: '#1c91c0' }, 5: { color: '#43459d' }, } };
<html> <head> <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); function drawChart() { var data = google.visualization.arrayToDataTable ([['X', '1', '2', '3', '4', '5', '6'], [1, 2, 3, 4, 5, 6, 7], [2, 3, 4, 5, 6, 7, 8], [3, 4, 5, 6, 7, 8, 9], [4, 5, 6, 7, 8, 9, 10], [5, 6, 7, 8, 9, 10, 11], [6, 7, 8, 9, 10, 11, 12] ]); var options = { legend: 'none', series: { 0: { color: '#e2431e' }, 1: { color: '#e7711b' }, 2: { color: '#f1ca3a' }, 3: { color: '#6f9654' }, 4: { color: '#1c91c0' }, 5: { color: '#43459d' }, } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
在上方,颜色由十六进制值指定(例如,'#e2431e'
或 '#f00'
(表示饱和红色),但也可以通过英文名称指定。以下示例对此进行了说明,还展示了如何使用 colors
选项修正图表调色板来控制颜色,而不是设置各个系列的颜色。一个区别在于,如果您修复调色板,并且调色板中的系列数多于颜色,则会重复使用颜色:如果调色板由红色和蓝色组成,则系列的一半为红色,另一半为蓝色。
var options = { legend: 'none', colors: ['black', 'blue', 'red', 'green', 'yellow', 'gray'] };
<html> <head> <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); function drawChart() { var data = google.visualization.arrayToDataTable ([['X', '1', '2', '3', '4', '5', '6'], [1, 2, 3, 4, 5, 6, 7], [2, 3, 4, 5, 6, 7, 8], [3, 4, 5, 6, 7, 8, 9], [4, 5, 6, 7, 8, 9, 10], [5, 6, 7, 8, 9, 10, 11], [6, 7, 8, 9, 10, 11, 12] ]); var options = { legend: 'none', colors: ['black', 'blue', 'red', 'green', 'yellow', 'gray'] }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
更改粗细程度
您可以使用 lineWidth
选项控制线条的粗细:
var options = { legend: 'none', hAxis: { maxValue: 7 }, vAxis: { maxValue: 13 }, lineWidth: 10, colors: ['#e2431e', '#d3362d', '#e7711b', '#e49307', '#e49307', '#b9c246'] };
<html> <head> <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); function drawChart() { var data = google.visualization.arrayToDataTable ([['X', '1', '2', '3', '4', '5', '6'], [1, 2, 3, 4, 5, 6, 7], [2, 3, 4, 5, 6, 7, 8], [3, 4, 5, 6, 7, 8, 9], [4, 5, 6, 7, 8, 9, 10], [5, 6, 7, 8, 9, 10, 11], [6, 7, 8, 9, 10, 11, 12] ]); var options = { legend: 'none', hAxis: { maxValue: 7 }, vAxis: { maxValue: 13 }, lineWidth: 10, colors: ['#e2431e', '#d3362d', '#e7711b', '#e49307', '#e49307', '#b9c246'] }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
如需控制系列的线宽,请使用 series
选项:
var options = { legend: 'none', hAxis: { maxValue: 7 }, vAxis: { maxValue: 13 }, series: { 0: { lineWidth: 1 }, 1: { lineWidth: 2 }, 2: { lineWidth: 4 }, 3: { lineWidth: 8 }, 4: { lineWidth: 16 }, 5: { lineWidth: 24 } }, colors: ['#e2431e', '#d3362d', '#e7711b', '#e49307', '#e49307', '#b9c246'] };
<html> <head> <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); function drawChart() { var data = google.visualization.arrayToDataTable ([['X', '1', '2', '3', '4', '5', '6'], [1, 2, 3, 4, 5, 6, 7], [2, 3, 4, 5, 6, 7, 8], [3, 4, 5, 6, 7, 8, 9], [4, 5, 6, 7, 8, 9, 10], [5, 6, 7, 8, 9, 10, 11], [6, 7, 8, 9, 10, 11, 12] ]); var options = { legend: 'none', hAxis: { maxValue: 7 }, vAxis: { maxValue: 13 }, series: { 0: { lineWidth: 1 }, 1: { lineWidth: 2 }, 2: { lineWidth: 4 }, 3: { lineWidth: 8 }, 4: { lineWidth: 16 }, 5: { lineWidth: 24 } }, colors: ['#e2431e', '#d3362d', '#e7711b', '#e49307', '#e49307', '#b9c246'] }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
虚线
许多虚线都可通过 lineDashStyle
选项实现,它接受一个数字数组。第一个数字表示短划线的长度,第二个数字表示其后面的间隙。如果有第三个数字,则是下一个短划线的长度,第四个数字(如果存在)是下一个间隔的长度。
在绘制图表时,这些长度会重复,因此 [4,
4]
表示连续 4 个短划线和 4 个长度的间隙。[5, 1, 3]
表示 5 长度的短划线、1 长度的间隙、3 长度的短划线、5 长度的间隙等等。一些示例:
var options = { hAxis: { maxValue: 10 }, vAxis: { maxValue: 18 }, chartArea: { width: 380 }, lineWidth: 4, series: { 0: { lineDashStyle: [1, 1] }, 1: { lineDashStyle: [2, 2] }, 2: { lineDashStyle: [4, 4] }, 3: { lineDashStyle: [5, 1, 3] }, 4: { lineDashStyle: [4, 1] }, 5: { lineDashStyle: [10, 2] }, 6: { lineDashStyle: [14, 2, 7, 2] }, 7: { lineDashStyle: [14, 2, 2, 7] }, 8: { lineDashStyle: [2, 2, 20, 2, 20, 2] } }, colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0', '#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'], };
<html> <head> <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); function drawChart() { var data = google.visualization.arrayToDataTable ([['X', 'lineDashStyle: [1, 1]', 'lineDashStyle: [2, 2]', 'lineDashStyle: [4, 4]', 'lineDashStyle: [5, 1, 3]', 'lineDashStyle: [4, 1]', 'lineDashStyle: [10, 2]', 'lineDashStyle: [14, 2, 7, 2]', 'lineDashStyle: [14, 2, 2, 7]', 'lineDashStyle: [2, 2, 20, 2, 20, 2]'], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], [2, 3, 4, 5, 6, 7, 8, 9, 10, 11], [3, 4, 5, 6, 7, 8, 9, 10, 11, 12], [4, 5, 6, 7, 8, 9, 10, 11, 12, 13], [5, 6, 7, 8, 9, 10, 11, 12, 13, 14], [6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [7, 8, 9, 10, 11, 12, 13, 14, 15, 16], [8, 9, 10, 11, 12, 13, 14, 15, 16, 17], [9, 10, 11, 12, 13, 14, 15, 16, 17, 18] ]); var options = { hAxis: { maxValue: 10 }, vAxis: { maxValue: 18 }, chartArea: { width: 380 }, lineWidth: 4, series: { 0: { lineDashStyle: [1, 1] }, 1: { lineDashStyle: [2, 2] }, 2: { lineDashStyle: [4, 4] }, 3: { lineDashStyle: [5, 1, 3] }, 4: { lineDashStyle: [4, 1] }, 5: { lineDashStyle: [10, 2] }, 6: { lineDashStyle: [14, 2, 7, 2] }, 7: { lineDashStyle: [14, 2, 2, 7] }, 8: { lineDashStyle: [2, 2, 20, 2, 20, 2] } }, colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0', '#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'], }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>