数据可视化基础数据可视化基础实验3：通过Dimplejs完成合适的基本图表.docx

1

实验

实验3：通过Dimple.js完成合适的基本图表

实验概述

在课程中，我们已经了解什么是数据可视化，可视化的工具有哪些。此实验将练习如果使用Dimple及使用Dimple创建常用报表

实验目的

完成本实验后，应该能够

创建Dimple模板页

使用Dimple创建一个柱状图

使用Dimple创建一个折线图

使用Dimple创建一个饼状图

使用Dimple创建一个区域图

实验准备

为了更好的进行前端代码编程，我们推荐使用Hbuilder的编辑器，可以到其官网dcloud.io上下载其必威体育精装版版本。在其“边改边看模式”进行代码修改，可以直接看到显示效果。

在服务器上下载本实验的代码模板，加入到Hbuilder的项目目录中，完成实验环境准备，就可以开始实验了。

实验步骤

步骤1创建Dimple模板页

进入实验环境：

1、使用编辑器打开Test-03\dimple-01-template.html

2、引入DimpleJs文件及所依赖的库

scripttype=text/javascriptsrc=../js/dimple/d3.v4.3.0.js

/script

scripttype=text/javascriptsrc=../js/dimple/dimple.v2.3.0.js

/script

2

3、使用Chrome打开，并打开调试控制台看到界面显示“helloworld!”控制台无报错说明程序运行正常

步骤2使用Dimple创建一个柱状图

1、使用编辑器打开MyDemo\Test-03\dimple-02-chart-bar.html，在注释处下一行编写代码。

2、创建一个SVG

varsvg=dimple.newSvg(body,600,400);

3、创建一个报表

varchart=newdimple.chart(svg,data);

4、设置X轴

chart.addCategoryAxis(x,name);

5、设置Y轴

chart.addMeasureAxis(y,score);

6、设置报表呈现类型

chart.addSeries(null,dimple.plot.bar);

7、设置报表过度动画效果

chart.ease=poly;

8、绘制呈现报表

chart.draw(1000);

9、使用Chrome打开结果如下：

步骤3使用Dimple创建一个折线图

1、使用编辑器打开MyDemo\Test-03\dimple-02-chart-line.html。在注释处下一行编写代码。

2、创建一个SVG

3

varsvg=dimple.newSvg(body,800,500);

3、创建一个报表

varchart=newdimple.chart(svg,filterData);

4、设置X轴

varx=chart.addTimeAxis(x,年份);

x.dateParseFormat=%Y;

x.tickFormat=%Y;

5、设置Y轴

vary=chart.addMeasureAxis(y,人均CO2);

6、设置报表呈现类型

chart.addSeries(null,dimple.plot.line);

7、设置报表过度动画效果

chart.ease=linear;

8、绘制呈现报表

chart.draw(1000);

9、使用Chrome打开结果如下：

步骤4使用Dimple创建一个饼状图

1、使用编辑器打开MyDemo\Test-03\dimple-04-chart-pie.html。在注释处下一行编写代码。

2、创建一个SVG

4

3、4、varsvg=dimple.newSvg(body,600,

3、

4、

3、创建一个报表

varchart=newdimple.chart(svg,groupData);

4、设置呈现数据

chart.addMeasureAxis(p,value);

7、设置报表呈现类型

chart.addSeries(key,dimple.plot.pie);

7、设置报表图例

chart.addLegend(10,30,100,200,left);

8、绘制呈现报表

chart.draw();

9、使用Chrome打开结果如下：

步骤5使用Dimple创建一个区域图

1、使用编辑器打