DC.js - Biểu đồ tổng hợp

Biểu đồ tổng hợp là một loại biểu đồ đặc biệt được cung cấp bởi DC.js. Nó cung cấp một tùy chọn để hiển thị nhiều biểu đồ trong cùng một lưới tọa độ. Biểu đồ tổng hợp cho phép các tùy chọn trực quan hóa biểu đồ nâng cao với một dòng mã tối thiểu.

Phương pháp biểu đồ tổng hợp

Trước khi chuyển sang vẽ biểu đồ tổng hợp, chúng ta cần hiểu dc.compositeChartlớp và các phương thức của nó. Dc.compositeChart sử dụng các mixin để có được chức năng cơ bản là vẽ biểu đồ. Các mixin được sử dụng bởi dc.compositeChart như sau:

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

Sơ đồ lớp hoàn chỉnh của dc.barChart như sau:

Dc.compositeChart nhận tất cả các phương thức của các mixin được chỉ định ở trên. Nó có phương pháp riêng để vẽ biểu đồ tổng hợp, được giải thích bên dưới:

soạn ([subChartArray])

Đặt bộ sưu tập các biểu đồ được hiển thị trong cùng một biểu đồ lưới tọa độ.

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

bọn trẻ()

Nhận tất cả các biểu đồ được tạo trong cùng một lưới tọa độ.

childOptions ([childOptions])

Nhận hoặc đặt các tùy chọn biểu đồ cho tất cả các biểu đồ con được tạo trong cùng một lưới tọa độ.

shareTitle ([shareTitle])

Nhận hoặc đặt tiêu đề được chia sẻ của biểu đồ. Nếu được đặt, nó sẽ được chia sẻ với tất cả các biểu đồ con được tạo trong cùng một lưới tọa độ.

shareColors ([shareColors])

Tương tự với hàm shareTitle (), ngoại trừ nó chia sẻ màu sắc thay vì tiêu đề.

đúngY ([yScale])

Nhận hoặc đặt tỷ lệ y cho trục bên phải của biểu đồ tổng hợp.

rightYAxis ([rightYAxis])

Lấy hoặc đặt trục y bên phải của biểu đồ tổng hợp.

rightYAxisLabel (rightYAxisLabel [??])

Nhận hoặc đặt nhãn trục y phù hợp.

alignYAxes ([alignYAxes])

Nhận hoặc đặt căn chỉnh giữa trục y bên trái và bên phải.

useRightAxisGridLines ([useRightAxisGridLines])

Nhận hoặc đặt có vẽ đường lưới từ trục y bên phải của biểu đồ tổng hợp hay không. Hành vi mặc định là vẽ từ trục y bên trái.

Vẽ biểu đồ tổng hợp

Hãy để chúng tôi vẽ một biểu đồ tổng hợp bằng cách sử dụng DC.js. Để làm điều này, chúng ta nên làm theo các bước dưới đây:

Bước 1: Xác định một biến

Hãy để chúng tôi xác định một biến biểu đồ như hình dưới đây:

var chart = dc.compositeChart('#compoiste');

Ở đây, hàm dc.compositeChart được ánh xạ với một vùng chứa có composite làm id của nó.

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

Đọc dữ liệu từ tệp people.csv -

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

Nếu dữ liệu không có, thì nó sẽ trả về một lỗi. Chúng tôi sẽ sử dụng cùng một tệp people.csv. Tệp dữ liệu mẫu như sau:

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 3: Lập bản đồ dữ liệu

Bây giờ, lập bản đồ dữ liệu như hình dưới đây -

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

Ở đây, chúng tôi đã gán tuổi từ dữ liệu Crossfilter. ~~ là một toán tử kép KHÔNG theo bit. Nó được sử dụng như một chất thay thế nhanh hơn.

Bây giờ, hãy áp dụng độ tuổi thứ nguyên và nhóm dữ liệu giới tính bằng cách sử dụng mã được cung cấp bên dưới -

var dim  = ndx.dimension(dc.pluck('age')),

grp1 = dim.group().reduceSum(dc.pluck('male')),
grp2 = dim.group().reduceSum(dc.pluck('female'));

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

Bây giờ, hãy tạo một biểu đồ tổng hợp bằng cách sử dụng mã được cung cấp bên dưới:

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

Đây,

  • Chiều rộng biểu đồ là 768 và chiều cao là 480.

  • Hàm d3.scale.linear được sử dụng để xây dựng một tỷ lệ tuyến tính mới với phạm vi miền xác định [15, 70].

  • Chúng tôi gán nhãn trục x làm tuổi và nhãn trục y làm số lượng.

  • Tiếp theo, hiển thị các đường lưới ngang như đúng.

  • Soạn giá trị màu của biểu đồ đường - màu đỏ cho giới tính nam và màu xanh lam cho giới tính nữ.

  • Cuối cùng, chúng tôi đặt giá trị brushOn thành false và hiển thị biểu đồ.

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

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

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

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.