DC.js - Ví dụ làm việc trên bảng điều khiển

Trong chương này, chúng tôi sẽ phát triển một bảng điều khiển trong DC bằng cách nhấp và chọn một biểu đồ.

Ví dụ làm việc

Bây giờ, chúng ta đã có nền tảng và có thể bắt đầu viết một số mã. Nó bao gồm các bước sau:

Bước 1: Thêm kiểu

Hãy để chúng tôi thêm các kiểu trong CSS bằng cách sử dụng mã dưới đây.

<style>
   .dc-chart { font-size: 12px; }
   .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
   .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>

Ở đây, chúng tôi đã chỉ định các kiểu cho biểu đồ, lưới trên cùng và mục lưới.

Bước 2: Tạo một biến

Hãy để chúng tôi tạo một biến trong DC như hình dưới đây.

var barChart = dc.barChart('#line');
var pieChart = dc.pieChart('#pie'); 
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");

Ở đây, chúng tôi đã gán một id biến barChart trong dòng, id countChart là mystats, pieChart là bánh và id gridChart là mygrid.

Bước 3: Đọc dữ liệu

Đọc dữ liệu từ tệp people.csv như được hiển thị bên dưới.

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

Nếu dữ liệu không có, thì nó sẽ trả về một lỗi. Bây giờ, gán dữ liệu cho một bộ lọc chéo. Ở đây, chúng tôi đã sử dụng cùng mộtpeople.csvmà chúng tôi đã sử dụng trong các ví dụ biểu đồ trước đây của chúng tôi. Nó trông như hình dưới đây.

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

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

Bước 4: Đặt thứ nguyên cho độ tuổi

Bạn có thể đặt thứ nguyên bằng cách sử dụng mã bên dưới.

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

Sau khi thứ nguyên đã được chỉ định, hãy nhóm tuổi bằng cách sử dụng mã được cung cấp bên dưới.

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

Bước 5: Đặt thứ nguyên cho giới tính

Bạn có thể đặt thứ nguyên bằng cách sử dụng mã bên dưới.

// gender dimension
var genderDimension = mycrossfilter.dimension(function(data) { return data.gender; });
var genderGroup = genderDimension.group().reduceCount();

Bước 6: Tạo biểu đồ thanh

Bây giờ, tạo biểu đồ thanh bằng cách sử dụng mã bên dưới.

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

Đây,

• Chúng tôi đã chỉ định chiều rộng biểu đồ là 400 và chiều cao là 200.
• Tiếp theo, chúng tôi đã chỉ định phạm vi miền là [15, 70].
• Chúng tôi đã đặt nhãn trục x làm tuổi và nhãn trục y làm số lượng.
• Chúng tôi đã chỉ định hàm co giãnY và X là đúng.

Bước 7: Tạo biểu đồ hình tròn

Bây giờ, hãy tạo một biểu đồ hình tròn bằng cách sử dụng mã bên dưới.

pieChart
   .width(200)
   .height(100)
   .dimension(genderDimension)
   .group(genderGroup);

Đây,

• Chúng tôi đã chỉ định chiều rộng biểu đồ là 200 và chiều cao là 100.
• Bây giờ, hãy nhóm thứ nguyên theo giới tính.

Bước 8: Tạo lưới và biểu đồ đếm

Bây giờ, hãy tạo lưới và đếm biểu đồ bằng cách sử dụng mã cho bên dưới.

countChart
   .dimension(mycrossfilter)
   .group(mycrossfilter.groupAll());

gridChart
   .dimension(ageDimension)
   .group(function (data) {
      return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
   })

Bước 9: Kết xuất lưới và đếm

Bây giờ, hiển thị lưới và đếm bằng cách sử dụng mã bên dưới.

.size(100)
   .htmlGroup (function(d) { 
      return 'Age: ' + d.key +
      '; Count: ' + d.values.length +
      ' people'
   })
   .html (function(d) { return d.name; })
   .sortBy(function (d) {
      return d.name;
   })
   .order(d3.ascending);

barChart.render();
pieChart.render();
countChart.render();
gridChart.render();

Ở đây, chúng tôi đã sắp xếp tên bằng cách sử dụng hàm html () và cuối cùng đã hiển thị biểu đồ.

Bước 10: Ví dụ làm việc

Mã hoàn chỉnh như sau. Tạo một trang webdashboard.html và thêm các thay đổi sau vào nó.

<html>
   <head>
      <title>DC dashboard sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
      
      <style>
         .dc-chart { font-size: 12px; }
         .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
      </style>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div style = "width: 600px;">
            <div id = "mystats" class = "dc-data-count" style = "float: right">
               <span class = "filter-count"></span> selected out of <span
                  class = "total-count"></span> | <a href = "javascript:dc.filterAll();
                  dc.renderAll();">Reset All</a>
            </div>
         </div>

         <div style = "clear: both; padding-top: 20px;">
            <div>
               <div id = "line"></div>
               <div id = "pie"></div>
            </div>
         </div>

         <div style = "clear: both">
            <div class = "dc-data-grid" id = "mygrid"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line'); // , 'myChartGroup');
         var pieChart = dc.pieChart('#pie'); //, 'myChartGroup');
         var countChart = dc.dataCount("#mystats");
         var gridChart = dc.dataGrid("#mygrid");

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

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

            // gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) { 
               return data.gender; 
            });
            var genderGroup = genderDimension.group().reduceCount();

         barChart
            .width(400)
            .height(200)
            .x(d3.scale.linear().domain([15,70]))
            .yAxisLabel("Count")
            .xAxisLabel("Age")
            .elasticY(true)
            .elasticX(true)
            .dimension(ageDimension)
            .group(ageGroup);

         pieChart
            .width(200)
            .height(100)
            .dimension(genderDimension)
            .group(genderGroup);

         countChart
            .dimension(mycrossfilter)
            .group(mycrossfilter.groupAll());

         gridChart
            .dimension(ageDimension)
            .group(function (data) {
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
            })
            .size(100)
            .htmlGroup (function(d) { 
               return 'Age: ' + d.key +
               '; Count: ' + d.values.length +
               ' people'
            })
            .html (function(d) { return d.name; })
            .sortBy(function (d) {
               return d.name;
            })
            .order(d3.ascending);

         barChart.render();
         pieChart.render();
         countChart.render();
         gridChart.render();
      });
      </script>
   </body>
</html>

Bây giờ, hãy yêu cầu trình duyệt và chúng tôi sẽ thấy phản hồi sau.

Bạn có thể tự kiểm tra bằng cách nhấp vào thanh, biểu đồ hình tròn và xem dữ liệu thay đổi như thế nào.