개요
많은 Google 차트에서 데이터 값은 정확한 지점에 표시됩니다. 선 차트는 선으로 연결된 일련의 점일 뿐 분산형 차트는 점일 뿐입니다.
분산형 차트를 제외한 모든 차트에서 이러한 포인트는 기본적으로 크기가 0입니다. pointSize
옵션으로 크기를 제어하고 pointShape
옵션으로 모양을 제어할 수 있습니다.
위에서는 차트가 6개이고 각 차트는 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>
간단한 예
이전 섹션의 차트와 달리 대부분의 차트에는 하나의 계열만 있습니다. 다음은 20포인트의 원형 포인트가 있는 선 차트의 예입니다.
기본 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>
'별표' 및 '다각형' 도형을 사용하면 면의 수를 맞춤설정할 수 있으며, 둘 다 기본값은 5입니다. 4면이 있는 별은 다음과 같습니다.
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에 가까우면 별표가 불가사리처럼 보입니다. 찌그러짐이 발생하면 점 모양이 평행한 다각형을 지나게 됩니다.
다음은 5면이 있는 별표에 대해 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
(16진수 문자열로 지정됨)shape-dent
shape-rotation
shape-sides
shape-type
stroke-color
(16진수 문자열로 지정됨)stroke-width
(16진수 문자열로 지정됨)size
visible
(점의 표시 여부)
불투명도는 스타일이 아닌 dataOpacity
옵션을 통해 제어됩니다.