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関数は、 composite そのIDとして。
ステップ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ビット演算子です。より高速な代替品として使用されます。
次に、ディメンションageを適用し、以下のコーディングを使用して性別データをグループ化します。
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ページを作成するcomposite.html それに次の変更を追加します。
<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>
ここで、ブラウザをリクエストすると、次の応答が表示されます。