DC.js - แผนภูมิวงกลม

แผนภูมิวงกลมคือกราฟสถิติแบบวงกลม แบ่งออกเป็นชิ้น ๆ เพื่อแสดงสัดส่วนที่เป็นตัวเลข บทนี้จะอธิบายวิธีการวาดแผนภูมิวงกลมโดยใช้ DC.js โดยละเอียด

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

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

  • baseMixin
  • capMixin
  • colorMixin

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

dc.pieChart ได้รับวิธีการทั้งหมดของ mixins ที่ระบุข้างต้นรวมทั้งมีวิธีการของตัวเองในการวาดแผนภูมิวงกลมโดยเฉพาะ มีดังนี้ -

  • cx ([cx])
  • drawPaths ([เส้นทาง])
  • emptyTitle ([ชื่อ])
  • externalLabels ([ป้ายกำกับ])
  • innerRadius ([innerRadius])
  • minAngleForLabel ([minAngleForLabel])
  • รัศมี ([รัศมี])
  • slicesCap ([หมวก])

ให้เราคุยรายละเอียดแต่ละเรื่องเหล่านี้

cx ([cx])

ใช้เพื่อรับหรือกำหนดตำแหน่งพิกัดกลาง x ซึ่งกำหนดไว้ด้านล่าง -

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

ในทำนองเดียวกันคุณสามารถดำเนินการตำแหน่งพิกัด y

drawPaths ([เส้นทาง])

วิธีนี้ใช้ในการวาดเส้นทางสำหรับแผนภูมิวงกลมและกำหนดไว้ด้านล่าง -

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

emptyTitle ([ชื่อ])

วิธีนี้ใช้เพื่อตั้งหัวเรื่องเมื่อไม่มีข้อมูล มีการกำหนดไว้ด้านล่าง -

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

externalLabels ([ป้ายกำกับ])

ใช้เพื่อวางตำแหน่งป้ายสไลซ์ที่ชดเชยจากขอบด้านนอกของแผนภูมิ มีการกำหนดไว้ด้านล่าง -

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

รัศมี ([รัศมี])

วิธีนี้ใช้เพื่อรับหรือกำหนดรัศมีด้านนอก หากไม่ได้ระบุรัศมีจะใช้เวลาครึ่งหนึ่งของความกว้างและความสูงขั้นต่ำของแผนภูมิ มีการกำหนดไว้ด้านล่าง -

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

slicesCap ([หมวก])

รับหรือกำหนดจำนวนชิ้นสูงสุดที่แผนภูมิวงกลมจะสร้าง ชิ้นบนจะถูกกำหนดโดยค่าจากสูงไปต่ำ ชิ้นส่วนอื่น ๆ ที่เกินฝาจะถูกม้วนเป็นชิ้นเดียว 'อื่น ๆ '

วาดแผนภูมิวงกลม

ให้เราสร้างแผนภูมิวงกลมใน 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');

ที่นี่รหัสพายจะถูกจับคู่กับพาย

ขั้นตอนที่ 3: อ่านข้อมูล

อ่านข้อมูลของคุณ (พูดจาก people.csv) โดยใช้ไฟล์ d3.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: ลดจำนวนเงิน ()

สร้างกลุ่ม Crossfilter โดยใช้ฟังก์ชัน group () และ reduceCount () กับมิติเพศที่สร้างไว้ข้างต้น - groupDimension.

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

  • ตั้งค่ามิติของแผนภูมิวงกลมเป็น genderDimension โดยใช้วิธีการมิติ ()

  • กลุ่มของแผนภูมิวงกลมถูกตั้งค่าเป็น genderGroup โดยใช้เมธอด group ()

  • เพิ่มเหตุการณ์การคลิกเพื่อบันทึกข้อมูลโดยใช้เหตุการณ์ในตัว 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>

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