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>
ตอนนี้ขอเบราว์เซอร์แล้วเราจะเห็นคำตอบต่อไปนี้