DC.js - 餅圖

上一頁
下一頁

餅圖是一種圓形的統計圖表。它被分成多個扇形來顯示數值比例。本章詳細解釋瞭如何使用 DC.js 繪製餅圖。

餅圖方法

在繪製餅圖之前，我們應該瞭解dc.pieChart類及其方法。dc.pieChart 使用 mixin 來獲得繪製圖表的其基本功能。dc.pieChart 使用的 mixin 如下：

  • baseMixin
  • capMixin
  • colorMixin

dc.pieChart 的完整類圖如下：

Pie Chart Methods

dc.pieChart 獲取上述指定 mixin 的所有方法，並且擁有自己專門繪製餅圖的方法。它們如下：

  • cx( [cx])
  • drawPaths( [path])
  • emptyTitle( [title])
  • externalLabels( [label])
  • innerRadius( [innerRadius])
  • minAngleForLabel( [minAngleForLabel])
  • radius( [radius])
  • slicesCap( [cap])

讓我們詳細討論每一個。

cx( [cx])

它用於獲取或設定中心 x 座標位置，定義如下：

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

同樣，您可以執行 y 座標位置。

drawPaths( [path])

此方法用於繪製餅圖的路徑，定義如下：

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

emptyTitle( [title])

此方法用於在沒有資料時設定標題。定義如下：

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

externalLabels( [label])

它用於將扇區標籤定位在圖表外邊緣的偏移位置。定義如下：

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( [radius])

此方法用於獲取或設定外半徑。如果未指定半徑，則它將取最小圖表寬度和高度的一半。定義如下：

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

slicesCap( [cap])

獲取或設定餅圖將生成的扇區最大數量。頂部扇區由從高到低的值確定。超過上限的其他扇區將合併到一個名為“其他”的扇區中。

繪製餅圖

讓我們在 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 位置。

people.csv

現在，讓我們按照以下步驟在 DC 中繪製餅圖。

步驟 1：包含指令碼

讓我們使用以下程式碼新增 D3、DC 和 Crossfilter：

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

這裡，Pie id 對映到 pie。

步驟 3：讀取資料

使用d3.csv()函式讀取您的資料（例如，來自 people.csv）。定義如下：

d3.csv("data/people.csv", function(errors, people) {
   console.log(people);
}

這裡，如果在指定位置找不到資料檔案，則 d3.csv() 函式將返回錯誤。

步驟 4：定義 Crossfilter

為 Crossfilter 定義一個變數並將資料分配給 Crossfilter。定義如下：

var mycrossfilter = crossfilter(people);

步驟 5：建立維度

使用以下函式為性別建立維度：

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

這裡，人員的性別用於維度。

步驟 6：reduceCount()

透過對上述建立的性別維度groupDimension應用 group() 和 reduceCount() 函式來建立一個 Crossfilter 組。

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()來記錄資料。每當渲染或繪製圖表時都會呼叫 renderlet。

步驟 8：工作示例

建立一個新的 html 檔案 pie.html 幷包含所有上述步驟，如下所示：

<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>

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

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