DC.js - 條形圖

條形圖是最常用的圖表型別之一，用於顯示和比較不同離散類別或組的數量、頻率或其他度量（例如平均值）。該圖的構造方式是，不同條形的高度或長度與其代表的類別的規模成比例。

x 軸（水平軸）表示不同的類別，它沒有刻度。y 軸（垂直軸）有刻度，這表示測量單位。條形圖可以垂直或水平繪製，具體取決於類別的數量以及類別的長度或複雜性。

條形圖方法

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

dc.stackMixin
dc.coordinateGridMixin

dc.barChart 的完整類圖如下：

dc.barChart 獲取上述指定 mixin 的所有方法。此外，它還擁有自己繪製條形圖的方法。解釋如下：

alwaysUseRounding( [round])

此方法用於獲取或設定條形居中時是否啟用舍入。

barPadding( [pad])

此方法用於獲取或設定條形之間的間距，作為條形大小的分數。可能的填充值介於 0-1 之間。

centerBar( [centerBar])

此方法用於設定條形，使其圍繞 x 軸上的資料位置居中。

gap( [gap])

此方法用於設定條形之間的固定間隙。

outerPadding( [pad])

此方法用於設定有序條形圖上的外部填充。

繪製條形圖

讓我們在 DC 中繪製一個條形圖。為此，我們應該按照以下步驟操作：

步驟 1：定義變數

讓我們定義一個圖表變數，如下所示：

var chart = dc.barChart('#bar');

在這裡，dc.barChart 函式與具有 **bar** 作為 ID 的容器對映。

步驟 2：讀取資料

從 people.csv 檔案讀取資料。

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

如果資料不存在，則返回錯誤。現在，將資料分配給 Crossfilter。對於此示例，我們將使用相同的 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 ageDimension = mycrossfilter.dimension(function(data) { 
   return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

在這裡，我們從 Crossfilter 資料中分配了年齡。~~ 是雙重非按位運算子。它用作 **Math.floor()** 函式的更快替代品。

現在，使用如下所示的 **reduceCount()** 函式對其進行分組：

var ageGroup = ageDimension.group().reduceCount();

步驟 4：生成圖表

現在，使用以下給出的程式碼生成條形圖：

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushOn(false)
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .dimension(ageDimension)
   .group(ageGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

這裡：

圖表寬度為 800，高度為 300。
d3.scale.linear 函式用於使用指定的域範圍 [15, 70] 構造新的線性比例。
接下來，我們將 brushOn 值設定為 false。
我們將 y 軸標籤設定為計數，x 軸標籤設定為年齡。
最後，使用 ageGroup 函式對年齡進行分組。

步驟 5：工作示例

完整的程式碼清單如下。建立一個網頁 **bar.html** 並向其中新增以下更改。

<html>
   <head>
      <title>DC Bar 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 = "bar"></div>
      </div>

      <script language = "javascript">
         var chart = dc.barChart('#bar');

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

            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

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

列印頁面