DC.js - แผนภูมิแท่ง

แผนภูมิแท่งเป็นกราฟประเภทหนึ่งที่ใช้บ่อยที่สุดและใช้เพื่อแสดงและเปรียบเทียบจำนวนความถี่หรือการวัดอื่น ๆ (เช่นค่าเฉลี่ย) สำหรับหมวดหมู่หรือกลุ่มที่ไม่ต่อเนื่อง กราฟถูกสร้างขึ้นเพื่อให้ความสูงหรือความยาวของแท่งต่างๆเป็นสัดส่วนกับขนาดของหมวดหมู่ที่แสดง

แกน x (แกนนอน) แสดงถึงหมวดหมู่ต่างๆที่ไม่มีมาตราส่วน แกน y (แกนแนวตั้ง) มีมาตราส่วนและแสดงหน่วยของการวัด แท่งสามารถวาดได้ทั้งแนวตั้งหรือแนวนอนขึ้นอยู่กับจำนวนหมวดหมู่และความยาวหรือความซับซ้อนของหมวดหมู่

วิธีการแผนภูมิแท่ง

ก่อนที่จะย้ายไปวาดแผนภูมิแท่งเราควรทำความเข้าใจกับไฟล์ dc.barChartคลาสและวิธีการ dc.barChart ใช้ mixins เพื่อรับฟังก์ชันพื้นฐานของการวาดแผนภูมิ mixins ที่ใช้โดย dc.barChart มีดังนี้ -

dc.stackMixin
dc.coordinateGridMixin

แผนภาพคลาสที่สมบูรณ์ของ dc.barChart มีดังนี้ -

dc.barChart รับวิธีการทั้งหมดของ mixins ที่ระบุข้างต้น นอกจากนี้มันยังมีวิธีการของตัวเองในการวาดแผนภูมิแท่ง มีคำอธิบายดังนี้ -

alwaysUseRounding ([รอบ])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าว่าจะเปิดใช้งานการปัดเศษหรือไม่เมื่อแท่งอยู่ตรงกลาง

barPadding ([แผ่นรอง])

วิธีนี้ใช้เพื่อรับหรือกำหนดระยะห่างระหว่างแท่งเป็นเศษส่วนของขนาดแท่ง ค่า padding ที่เป็นไปได้อยู่ระหว่าง 0-1

centerBar ([centerBar])

วิธีนี้ใช้เพื่อกำหนดแถบโดยให้อยู่กึ่งกลางรอบตำแหน่งข้อมูลบนแกน x

ช่องว่าง ([ช่องว่าง])

วิธีนี้ใช้เพื่อกำหนดช่องว่างคงที่ระหว่างแท่ง

outerPadding ([แผ่นรอง])

วิธีนี้ใช้เพื่อตั้งค่าช่องว่างด้านนอกบนแผนภูมิแท่งลำดับ

วาดแผนภูมิแท่ง

ให้เราวาดแผนภูมิแท่งใน DC ในการดำเนินการนี้เราควรทำตามขั้นตอนด้านล่าง -

ขั้นตอนที่ 1: กำหนดตัวแปร

ให้เรากำหนดตัวแปรแผนภูมิตามที่แสดงด้านล่าง -

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

ที่นี่ฟังก์ชัน dc.barChart ถูกแมปกับคอนเทนเนอร์ที่มี bar เป็นรหัส

ขั้นตอนที่ 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 เป็นเท็จ
เรากำหนดป้ายชื่อแกน 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>

ตอนนี้ขอเบราว์เซอร์แล้วเราจะเห็นคำตอบต่อไปนี้