Dcjs-composite-chart

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

DC.js-複合チャート

複合チャートは、DC.jsが提供する特別なタイプのチャートです。 同じ座標グリッドで複数のチャートをレンダリングするオプションを提供します。 複合チャートにより、最小限のコード行で高度なチャート視覚化オプションが可能になります。

複合チャートメソッド

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

  • dc.baseMixin
  • dc.marginMixin
  • dc.colorMixin
  • dc.coordinateGridMixin

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

複合チャートメソッド

dc.compositeChartは、上記で指定されたミックスインのすべてのメソッドを取得します。 以下に説明する複合チャートを描画する独自のメソッドがあります-

compose（[subChartArray]）

同じ座標グリッドチャートで描画されるチャートのコレクションを設定します。 

chart.compose([
   dc.lineChart(chart)
   dc.barChart(chart)
]);

子供（）

同じ座標グリッドで構成されたすべてのチャートを取得します。

childOptions（[childOptions]）

同じ座標グリッドで構成されたすべての子グラフのグラフオプションを取得または設定します。

shareTitle（[shareTitle]）

チャートの共有タイトルを取得または設定します。 設定されている場合、同じ座標グリッドに構成されているすべての子グラフで共有されます。

shareColors（[shareColors]）

shareTitle（）関数に似ていますが、タイトルの代わりに色を共有する点が異なります。

rightY（[yScale]）

複合グラフの右軸のyスケールを取得または設定します。

rightYAxis（[rightYAxis]）

複合グラフの右のY軸を取得または設定します。

rightYAxisLabel（rightYAxisLabel [??]）

右のY軸ラベルを取得または設定します。

alignYAxes（[alignYAxes]）

左右のy軸間の配置を取得または設定します。

useRightAxisGridLines（[useRightAxisGridLines]）

複合グラフの右のY軸からグリッド線を描画するかどうかを取得または設定します。 デフォルトの動作では、左のY軸から描画します。

複合チャートを描く

DC.jsを使用して複合グラフを描画します。 これを行うには、以下の手順に従う必要があります-

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

以下に示すように、グラフ変数を定義しましょう- 

var chart = dc.compositeChart('#compoiste');

ここで、dc.compositeChart関数は、IDが composite であるコンテナにマッピングされています。

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

people.csvファイルからデータを読み取ります- 

d3.csv("data/people.csv", function(errors, people) {

}

データが存在しない場合、エラーを返します。 同じ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

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

ステップ3：データをマッピングする

次に、以下に示すようにデータをマッピングします- 

var ndx = crossfilter();

ndx.add(people.map(function(data) {
   return {
      age: ~~((Date.now() - new Date(data.DOB))/(31557600000)),
      male: data.gender == 'Male' ? 1 : 0,
      female: data.gender == 'Male' ? 0 : 1
   };
}));

ここでは、クロスフィルターデータから年齢を割り当てました。 ~~は、二重のNOTビット演算子です。 より高速な代替として使用されます。

今、次元年齢を適用し、以下に示すコーディングを使用して性別データをグループ化します- 

var dim  = ndx.dimension(dc.pluck('age')),

grp1 = dim.group().reduceSum(dc.pluck('male')),
grp2 = dim.group().reduceSum(dc.pluck('female'));

ステップ4：チャートを生成する

次に、以下に示すコーディングを使用して複合グラフを生成します- 

composite
   .width(768)
   .height(480)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
   .renderHorizontalGridLines(true)
   .compose ([
      dc.lineChart(composite)
         .dimension(dim)
         .colors('red')
         .group(grp1, "Male")
         .dashStyle([2,2]),
      dc.lineChart(composite)
         .dimension(dim)
         .colors('blue')
         .group(grp2, "Female")
         .dashStyle([5,5])
   ])

.brushOn(false)
.render();

ここに、

  • チャートの幅は768、高さは480です。
  • d3.scale.linear関数は、指定されたドメイン範囲[15、70]で新しい線形スケールを構築するために使用されます。
  • 年齢としてx軸ラベルを、カウントとしてy軸ラベルを割り当てます。
  • 次に、水平グリッド線をtrueとしてレンダリングします。
  • 折れ線グラフの色の値を作成します-男性の性別は赤、女性は青です。
  • 最後に、brushOn値をfalseに設定し、チャートをレンダリングします。

ステップ5：作業例

完全なコードは次のとおりです。 Webページ compositel を作成し、次の変更を加えます。 

<html>
   <head>
      <title>DC composite chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.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 = "composite"></div>
      </div>

      <script type = "text/javascript">
         var composite = dc.compositeChart("#composite");

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

            ndx.add(people.map(function(data) {
               return {
                  age: ~~((Date.now() - new Date(data.DOB))/(31557600000)),
                  male: data.gender == 'Male' ? 1 : 0,
                  female: data.gender == 'Male' ? 0 : 1
               };
            }));

            var dim  = ndx.dimension(dc.pluck('age')),

            grp1 = dim.group().reduceSum(dc.pluck('male')),
            grp2 = dim.group().reduceSum(dc.pluck('female'));

            composite
               .width(768)
               .height(480)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
               .renderHorizontalGridLines(true)
               .compose ([
                  dc.lineChart(composite)
                  .dimension(dim)
                  .colors('red')
                  .group(grp1, "Male")
                  .dashStyle([2,2]),
                  dc.lineChart(composite)
                     .dimension(dim)
                     .colors('blue')
                     .group(grp2, "Female")
                     .dashStyle([5,5])
               ])
               .brushOn(false)
               .render();
         });
      </script>
   </body>
</html>

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

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