Dcjs-pie-chart

提供：Dev Guides
移動先:案内、検索

DC.js-円グラフ

円グラフは、円形の統計グラフです。 数値の割合を示すためにスライスに分割されます。 この章では、DC.jsを使用して円グラフを描画する方法について詳しく説明します。

円グラフのメソッド

円グラフを描画する前に、 dc.pieChart クラスとそのメソッドを理解する必要があります。 dc.pieChartは、ミックスインを使用して、チャート描画の基本機能を取得します。 dc.pieChartで使用されるミックスインは次のとおりです-

  • baseMixin
  • capMixin
  • colorMixin

dc.pieChartの完全なクラス図は次のとおりです-

円グラフのメソッド

dc.pieChartは、上記の指定されたミックスインのすべてのメソッドを取得するとともに、円グラフを具体的に描画する独自のメソッドを持っています。 彼らは次のとおりです-

  • cx（[cx]）
  • drawPaths（[パス]）
  • emptyTitle（[タイトル]）
  • externalLabels（[ラベル]）
  • innerRadius（[innerRadius]）
  • minAngleForLabel（[minAngleForLabel]）
  • radius（[半径]）
  • slicesCap（[cap]）

これらのそれぞれについて詳しく説明します。

cx（[cx]）

以下で定義されている中心のx座標位置を取得または設定するために使用されます- 

chart.cx = function (cx) {
   if (!arguments.length) {
      return (_cx ||  _chart.width()/2);
   }
};

同様に、y座標の位置を実行できます。

drawPaths（[パス]）

このメソッドは、円グラフのパスを描くために使用され、以下に定義されています- 

chart.drawPaths = function (path) {
   if (arguments.length === 0) {
      return path;
   }
};

emptyTitle（[タイトル]）

このメソッドは、データがない場合にタイトルを設定するために使用されます。 以下に定義されています- 

chart.emptyTitle = function (title) {
   if (arguments.length === 0) {
      return title;
   }
};

externalLabels（[ラベル]）

これは、チャートの外縁からオフセットされたスライスラベルを配置するために使用されます。 以下に定義されています- 

chart.externalLabels = function (label) {
   if (arguments.length === 0) {
      return label;
   }
};

innerRadius（[innerRadius]）

このメソッドは、円グラフの内側の半径を取得または設定するために使用されます。 内側の半径が 0px より大きい場合、円グラフはドーナツグラフとして表示されます。 以下に定義されています- 

_chart.innerRadius = function (innerRadius) {
   if (!arguments.length) {
      return _innerRadius;
   }
};

minAngleForLabel（[minAngleForLabel]）

このメソッドは、ラベルレンダリングの最小スライス角度を取得または設定するために使用されます。 以下に定義されています- 

 _chart.minAngleForLabel = function (minAngleForLabel) {
   if (!arguments.length) {
      return _minAngleForLabel;
   }
   _minAngleForLabel = minAngleForLabel;
   return _chart;
};

radius（[半径]）

このメソッドは、外側の半径を取得または設定するために使用されます。 半径が指定されていない場合、チャートの最小幅と高さの半分が必要になります。 以下に定義されています- 

_chart.radius = function (radius) {
   if (!arguments.length) {
      return _givenRadius;
   }
   _givenRadius = radius;
   return _chart;
};

slicesCap（[cap]）

円グラフが生成するスライスの最大数を取得または設定します。 上のスライスは、高から低までの値によって決定されます。 上限を超える他のスライスは、1つの「その他」スライスにまとめられます。

円グラフを描く

DCで円グラフを作成しましょう。 この円グラフの例では、 people.csv ファイルという名前のデータセットを使用します。 サンプルデータファイルは次のとおりです- 

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

....................
....................
....................

上記のサンプルには多くのレコードが含まれています。 次のリンクをクリックしてファイルをダウンロードし、DCの場所に保存できます。

link：/dcjs/src/people.csv [people.csv]

ここで、DCで円グラフを描画するために次の手順を実行します。

ステップ1：スクリプトを含める

次のコードを使用して、D3、DC、およびクロスフィルターを追加しましょう- 

<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>

ステップ2：変数を定義する

以下に示すように、 dc.pieChart 型のオブジェクトを作成します- 

var pieChart = dc.pieChart('#pie');

ここでは、パイIDがパイにマッピングされています。

ステップ3：データを読む

  • d3.csv（）*関数を使用して（たとえば、people.csvから）データを読み取ります。 次のように定義されます-
d3.csv("data/people.csv", function(errors, people) {
   console.log(people);
}

ここで、指定した場所でデータファイルが利用できない場合、d3.csv（）関数はエラーを返します。

ステップ4：クロスフィルターを定義する

クロスフィルターの変数を定義し、データをクロスフィルターに割り当てます。 以下に定義されています- 

var mycrossfilter = crossfilter(people);

ステップ5：ディメンションを作成する

以下の機能を使用して性別の次元を作成します- 

var genderDimension = mycrossfilter.dimension(function(data) {
   return data.gender;
});

ここでは、人々の性別が次元に使用されています。

ステップ6：reduceCount（）

上記で作成した性別ディメンション- groupDimension にgroup（）およびreduceCount（）関数を適用して、クロスフィルターグループを作成します。 

var genderGroup = genderDimension.group().reduceCount();

ステップ7：パイを生成する

以下の機能を使用してパイを生成します- 

pieChart
   .width(800)
   .height(300)
   .dimension(genderDimension)
   .group(genderGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

dc.renderAll();

ここに、

  • 円グラフの幅は800に設定されています。
  • 円グラフの高さは300に設定されています。
  • 円グラフの次元は、dimension（）メソッドを使用して genderDimension に設定されます。
  • 円グラフのグループは、group（）メソッドを使用して genderGroup に設定されます。
  • DC.js組み込みイベント* renderlet（）*を使用してデータを記録するクリックイベントを追加しました。 レンダレットは、チャートがレンダリングまたは描画されるたびに呼び出されます。

ステップ8：作業例

新しいhtmlファイル、pielを作成し、以下に示すように上記のすべての手順を含めます- 

<html>
   <head>
      <title>DC.js Pie Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <div>
         <div id = "pie"></div>
      </div>

      <script language = "javascript">
         var pieChart = dc.pieChart('#pie');

         d3.csv("data/people.csv", function(errors, people) {
            console.log(people);
            var mycrossfilter = crossfilter(people);

           //gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) {
               return data.gender;
            });
            var genderGroup = genderDimension.group().reduceCount();

            pieChart
               .width(800)
               .height(300)
               .dimension(genderDimension)
               .group(genderGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });

            dc.renderAll();
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

「https://www.finddevguides.com/index.php?title=Dcjs-pie-chart&oldid=35708」から取得
Powered by MediaWiki