ภาพรวม
แผนภูมิบางประเภทของ Google เช่น พื้นที่ เส้น และแผนภูมิผสม มีเส้นเชื่อมต่อจุดข้อมูล คุณปรับแต่งสี ความหนา และเส้นประได้โดยใช้เทคนิคในหน้านี้
การเปลี่ยนสี
คุณจะเปลี่ยนสีของเส้นที่เชื่อมต่อจุดข้อมูลใน Google Charts ได้ 2 วิธีดังนี้ ตัวเลือก 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>
ที่ด้านบน ระบบจะระบุสีด้วยค่าเลขฐาน 16
(เช่น '#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
ซึ่งจัดการอาร์เรย์ของตัวเลข ตัวเลขแรกจะระบุความยาวของขีดกลาง และส่วนที่ 2 จะระบุช่องว่างหลังจากนั้น หากมีตัวเลขที่ 3 แปลว่านี่เป็นความยาวของขีดกลางถัดไปและตัวเลขที่ 4 (หากมี) คือความยาวของช่องว่างถัดไป
เมื่อวาดแผนภูมิ ความยาวเหล่านี้จะซ้ํากัน ดังนั้น [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>