DC.js - แผนภูมิประกอบ

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

วิธีการทำแผนภูมิประกอบ

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

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

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

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

เขียน ([subChartArray])

ตั้งค่าคอลเล็กชันของแผนภูมิที่จะแสดงผลในแผนภูมิกริดพิกัดเดียวกัน

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

เด็ก ()

รับแผนภูมิทั้งหมดที่ประกอบขึ้นในตารางพิกัดเดียวกัน

childOptions ([childOptions])

รับหรือตั้งค่าตัวเลือกแผนภูมิสำหรับแผนภูมิลูกทั้งหมดที่ประกอบในตารางพิกัดเดียวกัน

shareTitle ([shareTitle])

รับหรือตั้งชื่อที่ใช้ร่วมกันของแผนภูมิ หากตั้งค่าไว้ระบบจะแชร์กับแผนภูมิย่อยทั้งหมดที่อยู่ในตารางพิกัดเดียวกัน

shareColors ([shareColors])

คล้ายกับฟังก์ชัน shareTitle () ยกเว้นจะแชร์สีแทนชื่อเรื่อง

rightY ([yScale])

รับหรือตั้งค่ามาตราส่วน y สำหรับแกนด้านขวาของแผนภูมิผสม

rightYAxis ([rightYAxis])

รับหรือตั้งค่าแกน y ที่ถูกต้องของแผนภูมิผสม

rightYAxisLabel (rightYAxisLabel [??])

รับหรือตั้งค่าป้ายชื่อแกน y ที่ถูกต้อง

alignYAxes ([alignYAxes])

รับหรือตั้งค่าการจัดแนวระหว่างแกน y ซ้ายและขวา

useRightAxisGridLines ([useRightAxisGridLines])

รับหรือตั้งค่าว่าจะวาดเส้นตารางจากแกน y ด้านขวาของแผนภูมิผสมหรือไม่ พฤติกรรมเริ่มต้นคือการวาดจากแกน y ด้านซ้าย

วาดแผนภูมิประกอบ

ให้เราวาดแผนภูมิประกอบโดยใช้ DC.js ในการดำเนินการนี้เราควรทำตามขั้นตอนด้านล่าง -

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

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

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

ที่นี่ฟังก์ชัน dc.compositeChart ถูกจับคู่กับคอนเทนเนอร์ที่มี composite เป็นรหัสของมัน

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

อ่านข้อมูลจากไฟล์ people.csv -

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

หากไม่มีข้อมูลแสดงว่ามีข้อผิดพลาด เราจะใช้ไฟล์ 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 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
   };
}));

ที่นี่เรากำหนดอายุจากข้อมูล Crossfilter ~~ เป็นตัวดำเนินการแบบไม่ใช้บิตคู่ ใช้แทนได้เร็วกว่า

ตอนนี้ใช้อายุมิติข้อมูลและจัดกลุ่มข้อมูลเพศโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

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

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

ขั้นตอนที่ 4: สร้างแผนภูมิ

ตอนนี้สร้างแผนภูมิประกอบโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

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

ที่นี่

  • ความกว้างของแผนภูมิคือ 768 และความสูง 480

  • ฟังก์ชัน d3.scale.linear ใช้เพื่อสร้างสเกลเชิงเส้นใหม่โดยมีช่วงโดเมนที่ระบุ [15, 70]

  • เรากำหนดป้ายกำกับแกน x เป็นป้ายกำกับอายุและแกน y เป็นจำนวน

  • จากนั้นแสดงเส้นตารางแนวนอนให้เป็นจริง

  • เขียนค่าสีของแผนภูมิเส้น - สีแดงสำหรับเพศชายและสีน้ำเงินสำหรับเพศหญิง

  • สุดท้ายเราตั้งค่า brushOn เป็นเท็จและแสดงผลแผนภูมิ

ขั้นตอนที่ 5: ตัวอย่างการทำงาน

รหัสที่สมบูรณ์มีดังนี้ สร้างเว็บเพจcomposite.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้

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

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