簡介
在許多 Google 圖表中,資料值會顯示在精確點。折線圖只是以線條連接的一組點,點陣圖僅是點。
在散佈圖以外的所有圖表中,這些點的預設大小為零。您可使用 pointSize
選項控制其大小,以及使用 pointShape
選項控制其形狀。
上面的圖表顯示了六個系列,各系列包含 pointSize
30 和 pointShape
。
var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 7 }, pointSize: 30, series: { 0: { pointShape: 'circle' }, 1: { pointShape: 'triangle' }, 2: { pointShape: 'square' }, 3: { pointShape: 'diamond' }, 4: { pointShape: 'star' }, 5: { pointShape: 'polygon' } } };
<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, null, null, null, null, null], [2, null, 3, null, null, null, null], [3, null, null, 4, null, null, null], [4, null, null, null, 5, null, null], [5, null, null, null, null, 6, null], [6, null, null, null, null, null, 7] ]); var options = { legend: 'none', pointSize: 30, series: { 0: { pointShape: 'circle' }, 1: { pointShape: 'triangle' }, 2: { pointShape: 'square' }, 3: { pointShape: 'diamond' }, 4: { pointShape: 'star' }, 5: { pointShape: 'polygon' } } }; 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>
幾個簡單範例
與上一節中的圖表不同,大多數圖表都只有一個序列。以下是含有 20pt 圓點的折線圖範例:
由於預設的 pointShape
為圓形,因此我們將其排除在選項中:
var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, curveType: 'function', pointSize: 20, };
<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', 'Y'], [1, 3], [2, 2.5], [3, 3], [4, 4], [5, 4], [6, 3], [7, 2.5], [8, 3] ]); var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, curveType: 'function', pointSize: 20, }; 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>
只要將 pointShape
設為「三角形」、「正方形」、「菱形」、「星形」或「多邊形」,即可將其變更為「圓形」:
var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, colors: ['#795548'], pointSize: 20, pointShape: 'square' };
<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', 'Y'], [1, 3], [2, 2.5], [3, 3], [4, 4], [5, 4], [6, 3], [7, 2.5], [8, 3] ]); var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, colors: ['#795548'], pointSize: 20, pointShape: 'square' }; 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>
您可以使用「星號」及「多邊形」形狀自訂側邊面數目,預設數量為五面。四面星星:
var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, colors: ['#EF851C'], pointSize: 30, pointShape: { type: 'star', sides: 4 } };
<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', 'Y'], [1, 3], [2, 2.5], [3, 3], [4, 4], [5, 4], [6, 3], [7, 2.5], [8, 3] ]); var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, colors: ['#EF851C'], pointSize: 30, pointShape: { type: 'star', sides: 4 } }; 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>
dent
以下是五面面星的 0.05 到 0.8 的凹痕:
var options = { legend: 'none', hAxis: { textPosition: 'none' }, vAxis: { textPosition: 'none', gridlines: { count: 0 }, baselineColor: 'white' }, colors: ['#E94D20', '#ECA403', '#63A74A', '#15A0C8', '#4151A3', '#703593', '#981B48'], pointSize: 20, annotations: { stemColor: 'white', textStyle: { fontSize: 16 } }, series: { 0: { pointShape: { type: 'star', sides: 5, dent: 0.05 } }, 1: { pointShape: { type: 'star', sides: 5, dent: 0.1 } }, 2: { pointShape: { type: 'star', sides: 5, dent: 0.2 } }, 3: { pointShape: { type: 'star', sides: 5 } }, 4: { pointShape: { type: 'star', sides: 5, dent: 0.5 } }, 5: { pointShape: { type: 'star', sides: 5, dent: 0.7 } }, 6: { pointShape: { type: 'star', sides: 5, dent: 0.8 } }, } };
<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 = new google.visualization.DataTable(); data.addColumn('string', 'Element'); data.addColumn('number', 'A'); data.addColumn( { type: 'string', role: 'annotation' }); data.addColumn('number', 'B'); data.addColumn( { type: 'string', role: 'annotation' }); data.addColumn('number', 'C'); data.addColumn( { type: 'string', role: 'annotation' }); data.addColumn('number', 'D'); data.addColumn( { type: 'string', role: 'annotation' }); data.addColumn('number', 'E'); data.addColumn( { type: 'string', role: 'annotation' }); data.addColumn('number', 'F'); data.addColumn( { type: 'string', role: 'annotation' }); data.addColumn('number', 'G'); data.addColumn( { type: 'string', role: 'annotation' }); data.addRow(['A', 1, "dent: 0.05", , , , , , , , , , , , null]); data.addRow(['B', , , 1, "dent: 0.1", , , , , , , , , , null]); data.addRow(['C', , , , , 1, "dent: 0.2", , , , , , , , null]); data.addRow(['D', , , , , , , 1, "default", , , , , , null]); data.addRow(['E', , , , , , , , , 1, "dent: 0.5", , , , null]); data.addRow(['F', , , , , , , , , , , 1, "dent: 0.7", , null]); data.addRow(['G', , , , , , , , , , , , , 1, "dent: 0.8"]); var options = { legend: 'none', hAxis: { textPosition: 'none' }, vAxis: { textPosition: 'none', gridlines: { count: 0 }, baselineColor: 'white' }, colors: ['#E94D20', '#ECA403', '#63A74A', '#15A0C8', '#4151A3', '#703593', '#981B48'], pointSize: 20, annotations: { stemColor: 'white', textStyle: { fontSize: 16 } }, series: { 0: { pointShape: { type: 'star', sides: 5, dent: 0.05 } }, 1: { pointShape: { type: 'star', sides: 5, dent: 0.1 } }, 2: { pointShape: { type: 'star', sides: 5, dent: 0.2 } }, 3: { pointShape: { type: 'star', sides: 5 } }, 4: { pointShape: { type: 'star', sides: 5, dent: 0.5 } }, 5: { pointShape: { type: 'star', sides: 5, dent: 0.7 } }, 6: { pointShape: { type: 'star', sides: 5, dent: 0.8 } }, } }; 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>
旋轉
所有點形狀都可用 rotation
選項旋轉,以度數指定。例如,我們可以將三角形旋轉 180 度,使其在以下面積圖中向下指向:
var options = { legend: 'none', colors: ['#15A0C8'], pointSize: 30, pointShape: { type: 'triangle', rotation: 180 } };
<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', 'Y'], [1, 3], [2, 2.5], [3, 2], [4, 3], [5, 4.5], [6, 6.5], [7, 9], [8, 12] ]); var options = { legend: 'none', colors: ['#15A0C8'], pointSize: 30, pointShape: { type: 'triangle', rotation: 180 } }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
自訂個別點
根據預設,套用至點的樣式會套用至系列中的所有點。如果要變更特定資料點的外觀,可以將樣式設為樣式。
在下圖中,我們增加其中一個點的大小,降低不透明度至 0.3,並改變形狀和顏色:
<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', 'Y', {'type': 'string', 'role': 'style'}], [1, 3, null], [2, 2.5, null], [3, 3, null], [4, 4, null], [5, 4, null], [6, 3, 'point { size: 18; shape-type: star; fill-color: #a52714; }'], [7, 2.5, null], [8, 3, null] ]); var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, curveType: 'function', pointSize: 7, dataOpacity: 0.3 }; 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>
可用的樣式自訂功能如下:
fill-color
(指定為十六進位字串)。shape-dent
shape-rotation
shape-sides
shape-type
stroke-color
(指定為十六進位字串)。stroke-width
(指定為十六進位字串)。size
visible
(不論是否可見。)
不透明度是透過樣式控制,而是使用 dataOpacity
選項進行控制。