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

1实验概述在课程中，我们已经了解什么是数据可视化，可视化的工具有哪些。此实验将练习如果使用Dimple及使用Dimple创建常用报表实验目的完成本实验后，应该能够创建Dimple模板页使用Dimple创建一个柱状图使用Dimple创建一个折线图使用Dimple创建一个饼状图使用Dimple创建一个区域图实验准备为了更好的进行前端代码编程，我们推荐使用Hbuilder的编辑器，可以到其官网dcloud.io上下载其最新版本。在其“边改边看模式”进行代码修改，可以直接看到显示效果。在服务器上下载本实验的代码模板，加入到Hbuilder的项目目录中，完成实验环境准备，就可以开始实验了。实验步骤进入实验环境：1、使用编辑器打开Test-03\dimple-01-template.html2、引入DimpleJs文件及所依赖的库<<scripttype="text/javascript"src="../js/dimple/d3.v4.3.0.js"></script><scripttype="text/javascript"src="../js/dimple/dimple.v2.3.0.js"></script>23、使用Chrome打开，并打开调试控制台看到界面显示“helloworld!”控制台无报错说明程序运行正常1、使用编辑器打开MyDemo\Test-03\dimple-02-chart-bar.html，在注释处下一行编写代码。varsvg=dimple.newSvg("body",600,400);3、创建一个报表varchart=newdimple.chart(svg,data);chart.addCategoryAxis("x","name");chart.addMeasureAxis("y","score");6、设置报表呈现类型chart.addSeries(null,dimple.plot.bar);7、设置报表过度动画效果chart.ease="poly";8、绘制呈现报表chart.draw(1000);9、使用Chrome打开结果如下：1、使用编辑器打开MyDemo\Test-03\dimple-02-chart-line.html。在注释处下一行编写代码。3varsvg=dimple.newSvg("body",800,500);3、创建一个报表varchart=newdimple.chart(svg,filterData);varx=chart.addTimeAxis("x","年份");x.dateParseFormat="%Y";x.tickFormat="%Y";vary=chart.addMeasureAxis("y","人均CO2");6、设置报表呈现类型chart.addSeries(null,dimple.plot.line);7、设置报表过度动画效果chart.ease="linear";8、绘制呈现报表chart.draw(1000);9、使用Chrome打开结果如下：1、使用编辑器打开MyDemo\Test-03\dimple-04-chart-pie.html。在注释处下一行编写代码。4varsvg=dimple.newSvg("body",600,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打开结果如下：1、使用编辑器打开MyDemo\Test-03\dimple-05-chart-area.html。在注释处下一行编写代码。varsvg=dimple.newSvg("body",800,500);创建一个报表varchart=newdimple.chart(svg,filterData);varx=chart.addTimeAxis("x","年份");x.dateParseFormat="%Y";5x.tickFormat="%Y";vary=chart.addMeasureAxis("y","人均CO2");6、设置报表颜色chart.defaultColors=[newdimple.color("#d8b365"),newdimple.color("#5ab4ac"),newdimple.color("#f5f5f5c")];7、设置报表呈现类型chart.addSeries("国家代码",dimple.plot.area);8、设置报表图例c