d3pieで円グラフを書きます
円グラフ javascriptで調べてたらいろいろなライブラリが見つかったので、その中の一つ「d3pie」で円グラフを書こうと思います。
d3.jsとは？
公式ページ。Data-Driven Documents の略。Dが3つあるからd3ですね。
データからSVGを描画してくれるライブラリです。
d3pie.jsとは？
公式ページ。d3.jsをもとにした、円グラフを描画するライブラリのようです。便利そうだけどQiitaであんまり見かけなかったので今回記事にしてみました。
バージョンが3~4年前から更新されてないのでもしかしたらメジャーじゃないのかも・・・。
書きます
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- グラフ表示 -->
<div id="myChart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.3.1/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3pie@0.2.1/d3pie/d3pie.min.js"></script>
<script>
var pie = new d3pie("myChart", {
data: {
content: [
{ label: "国語", value: 70 },
{ label: "英語", value: 80 },
{ label: "社会", value: 60 },
{ label: "理科", value: 40 },
{ label: "数学", value: 100 },
],
},
});
</script>
</body>
</html>
出来たグラフはこんな感じです。↓
デフォルトでグラフのまわりに凡例書いてくれたりして、なかなか見やすいですね。
良くある、円グラフの上に凡例があるの見にくいよ＞＜って人にはおすすめかもしれません。
細かい設定も出来ます。
<script>タグのこの部分、設定が細かく出来たりするので見てみましょう。
var pie = new d3pie("myChart", {
data: {
content: [
{ label: "国語", value: 70 },
{ label: "英語", value: 80 },
{ label: "社会", value: 60 },
{ label: "理科", value: 40 },
{ label: "数学", value: 100 },
],
},
});
まずはヘッダーを追加してみたり
var pie = new d3pie("myChart", {
"header": {
"title": {
"text": "期末試験の結果",
"fontSize": 20,
"font": "Meiryo UI"
},
"subtitle": {
"text": "2021-01-25",
"color": "#999999",
"fontSize": 13,
"font": "Meiryo UI"
},
"titleSubtitlePadding": 9
},
data: {
content: [
{ label: "国語", value: 70 },
{ label: "英語", value: 80 },
{ label: "社会", value: 60 },
{ label: "理科", value: 40 },
{ label: "数学", value: 100 },
],
},
});
また、footerを追加してみたり。
var pie = new d3pie("myChart", {
"header": {
"title": {
"text": "期末試験の結果",
"fontSize": 20,
"font": "Meiryo UI"
},
"subtitle": {
"text": "2021-01-25",
"color": "#999999",
"fontSize": 13,
"font": "Meiryo UI"
},
"titleSubtitlePadding": 9
},
"footer": {
"text": "図10-1.○○",
"color": "#999999",
"fontSize": 18,
"font": "open sans",
"location": "bottom-center"
},
data: {
content: [
{ label: "国語", value: 70 },
{ label: "英語", value: 80 },
{ label: "社会", value: 60 },
{ label: "理科", value: 40 },
{ label: "数学", value: 100 },
],
},
});
ほかにも、凡例のところをグラフからどれくらい離すか、またテキストの大きさはどうするか、などの設定が変えられそうでした。円グラフの表示順とかもソートが出来そうです。
試しながらいろいろ使ってみようと思います。