概要
多くの Google グラフでは、データ値が正確なポイントで表示されます。ライングラフは、これらのポイントを線で結ぶセットです。散布図は、ポイントにすぎません。
散布図を除くすべてのグラフでは、これらのポイントはデフォルトでゼロサイズになります。サイズは pointSize
オプションで、シェイプは pointShape
オプションで制御できます。
上には、それぞれ pointSize
30 と pointShape
が異なる 6 つの時系列のグラフが表示されます。
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>
簡単な例
前のセクションのグラフとは異なり、ほとんどのグラフには 1 つの系列しかありません。20 pt の円形ポイントを持つ折れ線グラフの例を次に示します。
デフォルトの 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
オプションを使用できます。へこみがゼロに近づくと、星は星のような形になります。へこみが 1 つに近づくと、正多角形を肥大化します。
星が 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>
ポイントを個別にカスタマイズする
デフォルトでは、ポイントに適用されたスタイルはシリーズ内のすべてのポイントに適用されます。特定のデータポイントの外観を変更する場合は、スタイルを設定します。
次のグラフでは、点の 1 つを拡大し、不透明度を 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
オプションで制御されます。