DC.js - 組合圖表

上一個
下一個

組合圖是 DC.js 提供的一種特殊型別的圖表。它提供了一個選項，可以在同一個座標網格中渲染多個圖表。組合圖使用最少的程式碼行即可實現高階的圖表視覺化選項。

組合圖表方法

在繼續繪製組合圖之前，我們需要了解 **dc.compositeChart** 類及其方法。dc.compositeChart 使用 mixins 來獲取繪製圖表的 basic 功能。dc.compositeChart 使用的 mixins 如下：

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

dc.barChart 的完整類圖如下所示：

Composite Chart Methods

dc.compositeChart 獲取上述指定 mixins 的所有方法。它有自己的方法來繪製組合圖，如下所述：

compose( [subChartArray])

設定要在同一座標網格圖中渲染的圖表集合。

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

children()

獲取在同一座標網格中組合的所有圖表。

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
   };
}));

這裡，我們從 Crossfilter 資料中分配了年齡。~~ 是一個雙 NOT 位運算子。它用作更快的替代品。

現在，應用維度 age 並使用以下程式碼對 gender 資料進行分組：

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：工作示例

完整程式碼如下。建立一個網頁 **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>

現在，請求瀏覽器，我們將看到以下響應。

列印頁面
上一個
下一個
廣告