できる！洗練されたデザイン性に豊富な機能の amCharts 4 の javascriptコンポーネントで
円グラフ、ドーナッツグラフ、半円グラフ、半円ドーナッツグラフを作る。

円グラフ、ドーナッツグラフ、半円グラフ、半円ドーナッツグラフで、データラベル、割合％を円の外側にきれいに表示できる。


1. 使用ファイル ｜2. 基本的な作り方 ｜3. サンプル

   amCharts 4（非商用使用-フリー/商用使用-有料）は、洗練されたデザイン性に豊富な機能を有するグラフ描画ライブラリです。
amCharts 4の円グラフは、データラベルやラベルなどを円の外側に綺麗に表示してくれます。

amCharts 4は、グラフを描画するコードスニペットの構文に、つぎの３つのコンポーネントを使用することができます。

  1. TypeScript / ES6 コード
  2. JavaScript コード
  3. JSON コード
このページで扱うグラフは、つぎのとおり、amCharts 4 の Chart Types が Pie Chart（円グラフ）です。
また、グラフを描画するコードはJavaScriptを使います。
  1. 円グラフ (regular pie) ：≫demo1-1｜≫demo1-2
  2. ドーナッツグラフ (donut) ：≫demo2
  3. 半円グラフ (Semi circle pie) ： ≫demo3
  4. 半ドーナッツグラフ (Semi circle donut) ： ≫demo4
  5. 3D 円グラフ（3D pie） ： ≫demo5
  6. 3D ドーナッツグラフ（3D donut) ： ≫demo6
  7. 3D 半円グラフ（3D Semi circle pie) ： ≫demo7
  8. 3D 半ドーナッツグラフ（3D Semi circle donut) ： ≫demo8
なお、このページでのamChartsは、非商用で使用します。

 １．使用ファイル

amChartsファイルは、 amChartsのCDNサイトを使用すると、ダウンロードが不要になります。

     使用ファイル

  1. xxxxx.html / xxx.js ： グラフを表示する自作ページ(html/javascript/css)。
  2. core.js ： 基本的な機能（必須）。
    インクルード方法は、Download a standalone JavaScript version から amCharts 4をダウンロードし使用します。
    または、CNNサイト- //www.amcharts.com/lib/4/ を直接使用します。
  3. charts.js ： チャート描画（必須）。 インクルード方法は、core.jsに同様。
  4. animated.js ：アニメーション テーマ。インクルード方法は、core.jsに同様。
  5. ccccc.js ： カラー テーマ。インクルード方法は、core.jsに同様。カラー テーマを省略するとデフォルトのテーマになります。
    カラー テーマは、８種類あり、デフォルトのテーマ１種類およびつぎのとおり７種類あります。

 ２．基本的な作り方

円グラフの基本的な作り方はつぎのとおりです。


 ３． サンプル

サンプルグラフは、下表のとおり円グラフおよびドーナッツグラフの８種類になります。
基本的な円グラフに、つぎの機能を追加カスタマイズします。
以下のカスタマイズは、基本的な円グラフのHTMLソースコードに対して追加・修正を行います。

▼基本的な円グラフのHTMLソースコード（基本的な円グラフのまとめの項より） 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>amCharts V4 円グラフ 基本サンプル Example regular pie chart </title>

<!-- Importing modules/scriptsFor a Pie chart,  import core (main module) and charts modules. CDNサイト -->
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>

<!--  グラフ描写域 CSS HTML -->
<style>
#chartdiv {
  width: 95%;
  height: 500px;
  padding:20px;
  /* font-size:12px;   グラフ内の文字の大きさ(タイトルを除く）指定可  */
  /* font-weight:bold; グラフ内の文字の太さ 指定可  */
}
</style>

</head>
<body>
<!-- 描写DIV域  -->
<div id="chartdiv"></div>

<!-- amcharts グラフ描写 javascript, 描写DIV域より後に置く -->
<script>

// グラフ生成インスタンス Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);

// グラフデータ Add data
chart.data = [
 { "職業": "大学教授・研究者", "人数": 264 },
 { "職業": "医師", "人数": 197 },
 { "職業": "小説家", "人数": 179 },
 { "職業": "大工など職人", "人数": 153 },
 { "職業": "公務員（行政職）", "人数": 150 },
 { "職業": "学芸員", "人数": 145 },
 { "職業": "歌手・ミュージシャン", "人数": 137 },
 { "職業": "パイロット", "人数": 137 },
 { "職業": "ジャーナリスト・編集者", "人数": 130 },
 { "職業": "俳優", "人数": 128 }
];

// シリーズ定義 Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries()); //グラフ生成 Creating a series, Regular Pie chart
pieSeries.dataFields.value = "人数";       //Setting up series 値
pieSeries.dataFields.category = "職業";           //Setting up series カテゴリ

//凡例表示 add legend 
chart.legend = new am4charts.Legend();
chart.legend.position = "bottom";
chart.legend.marginTop = 50; 
chart.legend.marginBottom = 20;

//タイトル create title
var title = chart.titles.create();
title.text = "（ｂｅランキング）生まれ変わったら就きたい職業　夢あるようで、ないようで…TOP 10";
title.fontSize = 18;
title.marginBottom = 10;

</script>
</body>
</html>

▼追加カスタマイズ項目
  1. グラフのスライスおよび凡例のマーカーに、好みの色を設定します。(spec01)
    ・amChartsのカラーテーマ（color theme 7種類）を使用（自動設定）(spec01-1)
    ・オプションのカラーリストで、好みの色を定義（手動設定） (spec01-2)
  2. 凡例のマーカーの形状を、円形（〇）に変更します。(spec02)
  3. データラベルの文字の色およびサイズを変更します。(spec03)
  4. グラフのスライスに枠線（ボーダーライン）を付けます。(spec04)
  5. データラベルの表示内容を変更します。(spec05)
  6. データラベルの表示位置を変更します。(spec06)
  7. グラフ初期起動アニメーションを設定します。(spec07)
  8. サブタイトル（ラベル）を設定します。(spec08)
  9. グラフデータをCSVから読み込みます。(spec09)
  10. 3D円グラフおよび3Dドナッツグラフで、最初のスライスの高さを変化させます。(spec10)
それぞれ、表の項番のクリックで該当グラフへリンクします。
同じく、表のグラフ名のクリックで該当グラフのデモを新しいウインドウで見ることができます。

表１．サンプルグラフのカスタマイズ項目対応表
項番サンプルグラフ
（クリックして新ウインドウでデモが見れます）		 spec01-1spec01-2spec01-3spec02spec03spec04spec05spec06spec07spec08spec09spec10
3.1円グラフ (regular pie) 〇〇〇〇〇〇〇〇〇〇〇
3.2ドーナッツグラフ (donut) 〇
3.3半円グラフ (Semi circle pie)
3.4半ドーナッツグラフ (Semi circle donut) 〇
3.53D 円グラフ（3D pie） 〇
3.63D ドーナッツグラフ（3D donut)
3.73D 半円グラフ（3D Semi circle pie)
3.83D 半ドーナッツグラフ（3D Semi circle donut)
注記

 ３．１． 円グラフ (pie)

 ３．２． ドーナッツグラフ (donut)

ドーナッツグラフの作成は、基本的な円グラフ（３． サンプル参照）につぎのコードを追加します。
合せて、ドーナッツの切り抜き部分にサブタイトルを描いてみます（タイトルは未定義）。 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>amCharts V4 ドーナッツグラフ Example donut chart + サブタイトル表示(spec08) </title>

<!-- Importing modules/scriptsFor a Pie chart,  import core (main module) and charts modules. CDNサイト -->
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>

<!-- グラフ描写DIV域 CSS -->
<style>
#chartdiv {
  width: 95%;
  height: 500px;
  font-size:12px;    /* グラフ内の文字の大きさ(タイトルを除く）指定可  */
  font-weight:bold;  /* グラフ内の文字の太さ(タイトルを除く）指定可  */
}
</style>

</head>
<body>
<!-- グラフ描写DIV域  -->
<div id="chartdiv"></div>

<!-- amcharts グラフ描写 javascript, 描写DIV域より後に置く -->
<script>

// グラフ生成インスタンス Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);

// グラフデータ Add data
chart.data = [
 { "職業": "大学教授・研究者", "人数": 264 },
 { "職業": "医師", "人数": 197 },
 { "職業": "小説家", "人数": 179 },
 { "職業": "大工など職人", "人数": 153 },
 { "職業": "公務員（行政職）", "人数": 150 },
 { "職業": "学芸員", "人数": 145 },
 { "職業": "歌手・ミュージシャン", "人数": 137 },
 { "職業": "パイロット", "人数": 137 },
 { "職業": "ジャーナリスト・編集者", "人数": 130 },
 { "職業": "俳優", "人数": 128 }
];

// シリーズ定義 Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries()); //グラフ生成 Creating a series, Regular Pie chart
pieSeries.dataFields.value = "人数";       //Setting up series 値
pieSeries.dataFields.category = "職業";    //Setting up series カテゴリ

//ドーナッツグラフ donut chart
chart.innerRadius = am4core.percent(36); /* 円の中心部の切り抜きの長さ(半径 ％） */

//凡例表示 add legend 
chart.legend = new am4charts.Legend();
chart.legend.position = "bottom";
chart.legend.marginTop = 50; 
chart.legend.marginBottom = 20; 

//タイトル未設定

//サブタイトル（ラベル）を描く spec08
var label = chart.chartContainer.createChild(am4core.Label);
label.text = " 生まれ変わったら\n　就きたい職業\n　　トップ 10";
label.align = "center";
label.isMeasured = false;
//label.x = 250;               // ラベル表示位置 pix値
label.x = am4core.percent(44); // ラベル表示位置 ％
//label.y = 300;               // ラベル表示位置 pix値
label.y = am4core.percent(45); // ラベル表示位置 ％
label.fontSize = 12;

</script>

</body>
</html>

 ３．３． 半円グラフ (Semi circle pie)

半円グラフ (Semi circle pie)の作成は、基本的な円グラフ（３． サンプル参照）につぎのコードを追加します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>amCharts V4 半円グラフ サンプル Example semi circle pie </title>

<!-- Importing modules/scriptsFor a Pie chart,  import core (main module) and charts modules. CDNサイト -->
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>

<!-- 描写DIV域
<style>
#chartdiv {
  width: 95%;
  height: 500px;
  font-size:12px; /* グラフ内の文字の大きさ(タイトルを除く）指定可  */
}
</style>
 -->
</head>
<body>
<!-- 描写DIV域  -->
<div id="chartdiv" style=" width: 800px;height: 500px;font-size:12px;"></div>

<!-- amcharts グラフ描写 javascript, 描写DIV域より後に置く -->
<script>

// グラフ生成インスタンス Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);

// グラフデータ Add data
chart.data = [
 { "職業": "大学教授・研究者", "人数": 264 },
 { "職業": "医師", "人数": 197 },
 { "職業": "小説家", "人数": 179 },
 { "職業": "大工など職人", "人数": 153 },
 { "職業": "公務員（行政職）", "人数": 150 },
 { "職業": "学芸員", "人数": 145 },
 { "職業": "歌手・ミュージシャン", "人数": 137 },
 { "職業": "パイロット", "人数": 137 },
 { "職業": "ジャーナリスト・編集者", "人数": 130 },
 { "職業": "俳優", "人数": 128 }
];

// シリーズ定義 Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries()); //グラフ生成 Creating a series, Regular Pie chart
pieSeries.dataFields.value = "人数";       //Setting up series 値
pieSeries.dataFields.category = "職業";           //Setting up series カテゴリ

//半円グラフ semi-circle-pie
chart.startAngle = 180;
chart.endAngle = 360;

//凡例表示 add legend 
chart.legend = new am4charts.Legend();
chart.legend.position = "bottom";
chart.legend.marginTop = 20; 
chart.legend.marginBottom = 20;

//タイトル
var title = chart.titles.create();
title.text = "（ｂｅランキング）生まれ変わったら就きたい職業 … TOP 10";
title.fontSize = 16;
title.marginBottom = 10;

</script>

</body>
</html>

 ３．４． 半円ドーナッツグラフ (Semi circle donut)

半円ドーナッツグラフ (Semi circle donut)を作成するには、基本的な円グラフ（３． サンプル参照）につぎのコードを追加します。
合せて、半円ドーナッツの中にサブタイトル（ラベル）を表示してみます。