Google chart toolsは、JavaScriptで記述したデータを元に、円グラフや折れ線グラフ、散布図などいろいろなタイプのグラフをSVGで作成し、ネット経由で表示してくれます。
Google chart tools を使った円グラフ（2022年8月・日本のOSシェア率）
円グラフ用に使ったデータは、2022年8月の日本のOS（PCとスマホ合わせて）シェア率です。
［データの出典］Statcounter Global Stats
| OS | 単位 % |
|---|---|
| Windows | 46.69 |
| iOS | 24.07 |
| Android | 12.9 |
| Unknown | 8.61 |
| OS X（macOS） | 6.77 |
| Linux | 0.45 |
3D表現無し
3D表現無しの普通のパイチャート表示です。なお、データの％の総数が100ではないため、パイチャートの各項目hoverの際に表示される% 表示が表示が違っています。
htmlのソース
<script type = "text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
<script language = "JavaScript">
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'OS');
data.addColumn('number', 'Percentage');
data.addRows([
['Windows', 46.69],
['iOS', 24.07],
['Android', 12.9],
['Unknown', 8.61],
['OS X (macOS)', 6.77],
['Linux', 0.45]
]);
var options = {
'title':'2022年8月の日本のOS（PC+mobile）シェア率',
'width':600,
'height':450,
};
var chart = new google.visualization.PieChart(document.getElementById('chart01'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
3D表現あり
scriptの var options 部分に is3D:true を追加すると、厚みがあって、それを斜め上から見た感じの3D表現になります。
var options = {
'title':'2022年8月の日本のOS（PC+mobile）シェア率（3D表示）',
'width':600,
'height':450,
is3D:true
};⊗ scriptの参考、引用元：
https://www.finddevguides.com/Googlecharts-pie-3d
