概要
多くの Google グラフでは、データ値は正確なポイントで表示されます。折れ線グラフではこれらの点が線で結ばれているのに対し、散布図では点だけが表示されます。
散布図以外のすべてのグラフでは、これらのポイントのサイズは、デフォルトでゼロになります。サイズは 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>
簡単な例
前のセクションのグラフとは異なり、ほとんどのグラフには系列が 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 です。四角星の例:
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 に近いほど星はヒトデのような形になり、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>
拡張ポイントを個別にカスタマイズする
デフォルトでは、点に適用されたスタイルは系列内のすべての点に適用されます。特定のデータポイントの外観を変更するには、スタイル設定を行います。
次のグラフでは、いずれかのポイントのサイズを大きくし、不透明度を 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-dentshape-rotationshape-sidesshape-typestroke-color（16 進数の文字列として指定）stroke-width（16 進数の文字列として指定）sizevisible（ポイントが表示されているかどうか）
不透明度は、スタイルではなく dataOpacity オプションで制御します。