DC.js - แผนภูมิซีรี่ส์

ชุดข้อมูลคือชุดข้อมูล คุณสามารถลงจุดแผนภูมิตามข้อมูล บทนี้อธิบายวิธีการวาดแผนภูมิอนุกรมโดยละเอียด

วิธีแผนภูมิชุด

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

dc.stackMixin

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

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

แผนภูมิ ([ฟังก์ชัน])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าฟังก์ชันแผนภูมิ

seriesAccessor ([accessor])

ใช้เพื่อรับหรือตั้งค่าฟังก์ชัน accessor สำหรับซีรี่ส์ที่แสดง

seriesSort ([sortFunction])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าฟังก์ชันเพื่อจัดเรียงรายการของชุดข้อมูลโดยให้ค่าชุดข้อมูล

valueSort ([sortFunction])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าฟังก์ชันเพื่อเรียงลำดับค่าของแต่ละชุด

วาดแผนภูมิชุด

ให้เราวาดแผนภูมิชุดใน DC ในตัวอย่างนี้ให้เราใช้ชุดข้อมูลที่ชื่อ people_hw.csv ไฟล์ข้อมูลตัวอย่างมีดังนี้ -

id,name,gender,height,weight
1,Kinsley,Male,168,90
2,Dimitry,Male,177,61
3,Martica,Female,152,76
4,Brittni,Female,156,88
5,Phillip,Male,161,78
6,Sofie,Female,161,71
7,Avril,Female,163,55
8,Allistir,Male,161,75
9,Emelda,Female,154,66
10,Camella,Female,153,52

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

ไฟล์ตัวอย่างด้านบนประกอบด้วยระเบียนจำนวนมาก คุณสามารถดาวน์โหลดไฟล์ได้โดยคลิกที่ลิงค์ต่อไปนี้และบันทึกลงในตำแหน่ง DC ของคุณ

people_hw.csv

ตอนนี้ให้เราปฏิบัติตามขั้นตอนต่อไปนี้เพื่อวาดแผนภูมิชุดใน DC

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

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

var chart = dc.seriesChart('#line');

ที่นี่ฟังก์ชัน seriesChart ถูกแมปกับ id line

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

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

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

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

people.forEach(function(x) {
   if(x.gender == 'Male') {
      x.newdata = 1;
   } else {
      x.newdata = 2;
   }
});

ขั้นตอนที่ 3: สร้างมิติข้อมูลอายุ

ตอนนี้สร้างมิติสำหรับอายุดังที่แสดงด้านล่าง -

var hwDimension = mycrossfilter.dimension(function(data) { 
   return [data.gender, data.height];
});

ที่นี่เราได้กำหนดมิติข้อมูลและส่งกลับเพศและความสูง ตอนนี้จัดกลุ่มโดยใช้ไฟล์reduceCount() ฟังก์ชันซึ่งกำหนดไว้ด้านล่าง -

var hwGroup = hwDimension.group().reduceCount();

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

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

chart
   .width(800)
   .height(600)
   .chart(function(c) { 
      return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true); 
   })
   
   .x(d3.scale.linear().domain([145,180]))
   .elasticY(true)
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Count")
   .dimension(hwDimension)
   .group(hwGroup)
   .seriesAccessor(function(d) { return d.key[0];})
   .keyAccessor(function(d) { return +d.key[1]; })
   .valueAccessor(function(d) { return +d.value; })
   legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1).legendWidth(120)\
      .itemWidth(60));

chart.render();

ที่นี่

ความกว้างของแผนภูมิคือ 800 และความสูงคือ 600
ใช้เมธอด d3.scale.linear () เราระบุค่าโดเมน
การใช้ฟังก์ชัน seriesAccessor จะแสดงชุดข้อมูลสำหรับข้อมูล
ตัวเข้าถึงคีย์และค่าจะส่งคืนคีย์และค่าจากชุดข้อมูล
คำอธิบายแผนภูมิสามารถใช้เพื่อเพิ่มความสูงและความกว้าง

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

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

<html>
   <head>
      <title>Series 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 = "line"></div>
      </div>

      <script language = "javascript">
         var chart = dc.seriesChart('#line');

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

            people.forEach(function(x) {
               if(x.gender == 'Male') {
                  x.newdata = 1;
               } else {
                  x.newdata = 2;
               }
            });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [data.gender, data.height];
            });
            var hwGroup = hwDimension.group().reduceCount();

            chart
               .width(800)
               .height(600)
               .chart(function(c) { 
                  return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
               })
               .x(d3.scale.linear().domain([145,180]))
               .elasticY(true)
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Count")
               .dimension(hwDimension)
               .group(hwGroup)
               .seriesAccessor(function(d) { return d.key[0];})
               .keyAccessor(function(d) { return +d.key[1]; })
               .valueAccessor(function(d) { return +d.value; })
               .legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1)
                  .legendWidth(120).itemWidth(60));

            chart.render();
         });
      </script>
   </body>
</html>

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