[d3pie.js]円グラフを書こう

16650 ワード
d3.js d3pie.js JavaScript JavaScript テキストリンク

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/[email protected]/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 },
        ],
      },
    });

ほかにも、凡例のところをグラフからどれくらい離すか、またテキストの大きさはどうするか、などの設定が変えられそうでした。円グラフの表示順とかもソートが出来そうです。
試しながらいろいろ使ってみようと思います。