📅  最后修改于: 2020-10-25 09:56:14             🧑  作者: Mango
在本章中,我们将通过单击并选择一个图表来开发DC仪表板。
现在,我们有了背景并且可以开始编写一些代码。它包含以下步骤-
让我们使用下面给出的编码在CSS中添加样式。
在这里,我们为图表,网格顶部和网格项目分配了样式。
让我们在DC中创建一个变量,如下所示。
var barChart = dc.barChart('#line');
var pieChart = dc.pieChart('#pie');
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");
在这里,我们在一行中分配了一个barChart变量id,countChart id是mystats,pieChart是pie和gridChart id是mygrid。
如下所示,从people.csv文件中读取数据。
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(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
.........................................
.........................................
您可以使用以下代码设置尺寸。
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
分配尺寸后,使用以下代码对年龄进行分组。
var ageGroup = ageDimension.group().reduceCount();
您可以使用以下代码设置尺寸。
// gender dimension
var genderDimension = mycrossfilter.dimension(function(data) { return data.gender; });
var genderGroup = genderDimension.group().reduceCount();
现在,使用以下代码生成条形图。
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);
这里,
现在,使用下面的代码生成一个饼图。
pieChart
.width(200)
.height(100)
.dimension(genderDimension)
.group(genderGroup);
这里,
现在,创建网格并使用下面给出的编码对图表进行计数。
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
gridChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})
现在,使用以下代码渲染网格并计数。
.size(100)
.htmlGroup (function(d) {
return 'Age: ' + d.key +
'; Count: ' + d.values.length +
' people'
})
.html (function(d) { return d.name; })
.sortBy(function (d) {
return d.name;
})
.order(d3.ascending);
barChart.render();
pieChart.render();
countChart.render();
gridChart.render();
在这里,我们已经使用html()函数对名称进行了排序,并最终呈现了图表。
完整的代码如下。创建一个网页dashboard.html,并对其进行以下更改。
DC dashboard sample
现在,请求浏览器,我们将看到以下响应。
您可以通过单击条形图,饼图并查看数据如何更改来检查自己。