开发手册 欢迎您!
软件开发者资料库

DC.js - 饼图

DC.js饼图 - 从简单和简单的步骤学习DC.js从基本到高级概念,包括简介,安装,概念,Crossfilter简介,D3.js简介,Mixins,baseMixin,capMixin,colorMixin,marginMixin, coordinateGridMixin,饼图,线,条,复合,系列,散点图,气泡图,热图,数据计数,表,网格,图例,仪表板工作示例。

饼图是圆形统计图.它被分成切片以显示数字比例.本章介绍如何使用DC.js详细绘制饼图.

饼图方法

在继续绘制饼图之前,我们应该了解 dc.pieChart 类及其方法. dc.pieChart使用mixins来获得绘制图表的基本功能. dc.pieChart使用的mixins如下 :

  • baseMixin

  • capMixin

  • colorMixin

dc.pieChart的完整类图如下&&;

饼图方法

dc.pieChart获取上述指定mixin的所有方法以及有自己的方法来专门绘制饼图.它们如下&&;

  • cx([cx])

  • drawPaths([path ])

  • emptyTitle([title])

  • externalLabels([label])

  • innerRadius([ innerRadius])

  • minAngleForLabel([minAngleForLabel])

  • radius([radius])

  • slicesCap( [cap])

让我们详细讨论这些内容.

cx([cx])

它用于获取或设置中心x坐标位置,其定义低于 :

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

同样,你可以执行y坐标位置.

drawPaths([path])

此方法用于绘制饼图的路径,定义低于 :

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

emptyTitle([title])

此方法用于在没有数据时设置标题.它的定义低于 :

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

externalLabels([label])

它用于定位偏离图表外边缘的切片标签.它的定义低于 :

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

radius([radius])

此方法用于获取或设置外半径.如果未指定半径,则它将占用最小图表宽度和高度的一半.它定义如下 :

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

slicesCap([cap])

获取或设置饼图将生成的最大切片数.顶部切片由从高到低的值确定.超过上限的其他切片将汇总到一个"其他"切片中.

绘制饼图

让我们创建一个饼图DC.在此饼图示例中,让我们获取名为 people.csv 文件的数据集.样本数据文件如下 :

id,name,gender,DOB,MaritalStatus,CreditCardType1,Damaris,Female,1973-02-18,false,visa-electron2,Barbe,Female,1969-04-10,true,americanexpress3,Belia,Female,1960-04-16,false,maestro4,Leoline,Female,1995-01-19,true,bankcard5,Valentine,Female,1992-04-16,false,6,Rosanne,Female,1985-01-05,true,bankcard7,Shalna,Female,1956-11-01,false,jcb8,Mordy,Male,1990-03-27,true,china-unionpay............................................................

以上示例包含许多记录.您可以通过单击以下链接下载该文件并将其保存到DC位置.

people.csv

现在,让我们遵循以下步骤在DC中绘制饼图.

步骤1:包含脚本

让我们使用以下代码添加D3,DC和Crossfilter :

第2步:定义变量

创建类型为 dc.pieChart 如下图所示 :

var pieChart = dc.pieChart('#pie');

这里,Pie id用饼图映射.

第3步:读取数据

使用 d3.csv()函数读取数据(例如,来自people.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步:reduceCount()

通过应用创建Crossfilter组group()和reduceCount()函数在上面创建的性别维度上 -   groupDimension .

var genderGroup = genderDimension .集团()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.

  • 使用dimension()方法将饼图的尺寸设置为 genderDimension .

  • 设置饼图组使用group()方法 genderGroup .

  • 添加了一个点击事件,使用内置的DC.js记录数据event, renderlet().每当渲染或绘制图表时,都会调用renderlet.

步骤8:工作示例

创建一个新的html文件,pie.html并包含以上所有步骤,如下所示 :

         DC.js Pie Chart Sample                                             
         
      
               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();         });         

现在,请求浏览器,我们会看到以下回复.