《大数据应用技术基础》课件 项目六 数据可视化图表展示_第1页
《大数据应用技术基础》课件 项目六 数据可视化图表展示_第2页
《大数据应用技术基础》课件 项目六 数据可视化图表展示_第3页
《大数据应用技术基础》课件 项目六 数据可视化图表展示_第4页
《大数据应用技术基础》课件 项目六 数据可视化图表展示_第5页
已阅读5页，还剩101页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目六数据可视化图表展示目录任务一：柱形图交互式展示库存量任务二：柱形图交互式展示单位人数分布任务三：柱形图展示销售实际完成情况任务四：水平柱形图展示城市问卷结果任务五：饼形图展示城各类商品销售占比任务六：饼形图添加图例与交互应用任务七：折线图展示进店人数任务八：K线图展示股票价格任务九：雷达图展示职员能力任务十：仪表盘展示进度任务一：柱形图交互式展示库存量【任务分析】

编写网页实现应用柱形图示库存量，如图6-1所示。1）依据数组变量agriculturalData的值创建柱形图。varagriculturalData=[{product:"苹果",yield:320},{product:"香蕉",yield:220},{product:"水稻",yield:520},{product:"小麦",yield:260},{product:"玉米",yield:500}];2）柱形图底部显示产品名称，顶部标注数据。3）鼠标悬停于柱形图时，背景颜色更换样式。任务一：柱形图交互式展示库存量图6-1应用柱形图示库存量任务一：柱形图交互式展示库存量【任务实施】1.启动HBuilderX，执行“文件/新建/项目”，如图6-2所示。图6-2执行“文件/新建/项目”经验分享：除了HbuilderX，还有很多其他的网页编辑工具可供选择。例如:AdobeDreamweaver，SublimeText，VisualStudioCode等，在实际应用中，可以根据自己的对工具应用的熟练情况选择其中一种进行编辑。任务一：柱形图交互式展示库存量2.选择“普通项目\基本HTML项目”，填入项目名称web，输入目录D:/web，如图6-3所示。图6-3输入目录D:/web任务一：柱形图交互式展示库存量3.打开index.html，将输入网页代码，定义标题等逐步实现柱形图设计，如图6-4图6-4打开index.html任务一：柱形图交互式展示库存量4.把素材d3js.js文件复制到项目的js目录下，如图6-5所示。图6-5把素材d3js.js文件复制到项目的js目录下任务一：柱形图交互式展示库存量5.打开index.html，创建h1标签，div标签和svg标签，如图6-6所示。图6-6创建h1标签，div标签和svg标签任务一：柱形图交互式展示库存量6.在index.html文件中输入网页代码，导入d3js，用JavaScript代码定义库存数据变量，如图6-7所示。图6-7用JavaScript代码定义库存数据变量任务一：柱形图交互式展示库存量7.在index.html输入网页代码，定义svg元素，如图6-8所示。图6-8定义svg元素任务一：柱形图交互式展示库存量8.输入代码定义柱形图的比例尺，如图6-9所示。图6-9输入代码定义柱形图的比例尺任务一：柱形图交互式展示库存量9.输入代码定义创建柱形图，设置矩形条的宽度、样式及数据等，如图6-10所示。图6-10置矩形条的宽度、样式及数据等任务一：柱形图交互式展示库存量10.输入代码实现数据的标注，如图6-11所示。图6-11输入代码实现数据的标注任务一：柱形图交互式展示库存量11.输入代码实现产品名称的样式、数据等设置，如图6-12所示。图6-12输入代码实现产品名称的样式任务一：柱形图交互式展示库存量12.输入style代码，实现柱形图的矩形条.bar等标签的样式属性设置，如图6-13所示。图6-13实现柱形图的矩形条.bar等标签的样式任务一：柱形图交互式展示库存量13.输入style代码设置.label等标签的样式属性设置，如图6-14所示。图6-14设置.label等标签的样式任务一：柱形图交互式展示库存量14.在资源管理器查看网站，可用浏览器打开index.html文件，查看网页效果，如图6-15所示。图6-15查看网页效果任务一：柱形图交互式展示库存量参考代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>库存量展示-交互式柱形图表</title><style>.bar{fill:#aaaaff;

cursor:pointer;}.bar:hover{fill:orange;}任务一：柱形图交互式展示库存量#box{width:400px;margin:0auto;

background-color:#ddd9ff;text-align:center;padding-left:20px;}.label{font-size:18px;text-anchor:middle;font-weight:bold;

}h1{text-align:center;}任务一：柱形图交互式展示库存量.label2{font-size:18px;text-anchor:middle;font-weight:bold;}</style></head><body><h1>库存量展示-交互式柱形图表</h1><divid="box"><svgid="chart"width="400"height="300"></svg></div>

<scriptsrc="./js/d3js.js"></script><script>任务一：柱形图交互式展示库存量//库存量varagriculturalData=[{product:"苹果",yield:320},{product:"香蕉",yield:220},{product:"水稻",yield:520},{product:"小麦",yield:260},{product:"玉米",yield:500}];

//创建SVG元素varsvg=d3.select("#chart").append("svg").attr("width",400).attr("height",300);

//创建柱形图比例尺任务一：柱形图交互式展示库存量varyScale=d3.scaleLinear().domain([0,d3.max(agriculturalData,function(d){returnd.yield;})]).range([0,250]);

//创建矩形条svg.selectAll("rect").data(agriculturalData).enter().append("rect").attr("class","bar").attr("x",function(d,i){returni*80;})任务一：柱形图交互式展示库存量.attr("y",function(d){return50+250-yScale(d.yield);//通过比例尺缩放柱形图高度}).attr("width",50).attr("height",function(d){returnyScale(d.yield);}).on("mouseover",function(){d3.select(this).style("fill","orange");}).on("mouseout",function(){d3.select(this).style("fill","#aaaaff");});

//添加数据标注任务一：柱形图交互式展示库存量svg.selectAll(".label").data(agriculturalData).enter().append("text").text(function(d){returnd.yield+"吨";}).attr("class","label").attr("x",function(d,i){returni*80+25;//设置为矩形条的中心点}).attr("y",function(d){return50+250-yScale(d.yield)-5;//将标注文本略微上移一些});//添加产品名称任务一：柱形图交互式展示库存量svg.selectAll(".label2").data(agriculturalData).enter().append("text").text(function(d){returnduct;}).attr("class","label2").attr("x",function(d,i){returni*80+25;//设置为矩形条的中心点}).attr("y",function(d){return280;//将标注文本略微上移一些}); </script></body></html>任务二：柱形图交互式展示单位人数分布【任务分析】编写网页实现应用柱形图交互式展示单位人数分布，如图6-17所示。1）依据数组变量dataset的值创建柱形图。 vardataset=[ {postname:'',value:0}, {postname:'文员',value:30}, {postname:'客服',value:80}, {postname:'售后',value:30}, {postname:'生产',value:40}, {postname:'后勤',value:50}, {postname:'技术',value:60}, {postname:'网络',value:70} ];2）柱形图右则添加文字说明区。3）图表显示X轴与Y轴。4）鼠标悬停于柱形图时，背景颜色更换样式。任务二：柱形图交互式展示单位人数分布图6-17柱形图交互式展示单位人数分布任务二：柱形图交互式展示单位人数分布【任务实施】1.启动HBuilderX，新建网站项目，在index.html文件中输入网页代码，导入d3js，应用html代码、JavaScript代码、style代码逐步在参考代码指引下实现图表功能，如图6-18所示。图6-18在index.html文件中输入网页代码任务二：柱形图交互式展示单位人数分布2.输入html代码，设置h2标签显示标题，设置<divid="box">标签定义显示区域，设置<divid="box1">标签用于显示图表，设置<divid="box2">标签用于显示说明文字。html代码： <h2class="h2title">单位人数分布</h2> <divid="box"> <divid="box1"> </div> <divid="box2">

说明：

下方是分工名称，数字表示对应分工的人数 </div> </div>任务二：柱形图交互式展示单位人数分布3.输入JavaScript代码，定义dataset变量存储图表数组，再逐步实现创建SVG容器、绘制矩形条、设置x,y比例尺、在图表上添加x轴、添加x轴y轴、添加数据标签等功能。JavaScript代码： <script> //数据集 vardataset=[ {postname:'',value:0}, {postname:'文员',value:30}, {postname:'客服',value:80}, {postname:'售后',value:30}, {postname:'生产',value:40}, {postname:'后勤',value:50}, {postname:'技术',value:60}, {postname:'网络',value:70} ];

//创建SVG容器任务二：柱形图交互式展示单位人数分布 varsvgWidth=600, svgHeight=500; varmargin={ top:20, right:20, bottom:30, left:40 }; varwidth=svgWidth-margin.left-margin.right; varheight=svgHeight-margin.top-margin.bottom;

varsvg=d3.select('#box1') .append('svg') .attr('width',svgWidth) .attr('height',svgHeight);

任务二：柱形图交互式展示单位人数分布 varg=svg.append('g') .attr('transform','translate('+margin.left+','+margin.top+')');

//设置x,y比例尺 varx=d3.scaleBand().range([0,width]).padding(0.1); vary=d3.scaleLinear().range([height,0]);

x.domain(dataset.map(function(d){ returnd.postname; })); y.domain([0,d3.max(dataset,function(d){ returnd.value; })]);

//绘制矩形条任务二：柱形图交互式展示单位人数分布 g.selectAll('.bar') .data(dataset) .enter() .append('rect') .attr('class','bar') .attr('x',function(d){ returnx(d.postname); }) .attr('y',function(d){ returny(d.value); }) .attr('width',x.bandwidth()) .attr('height',function(d){ returnheight-y(d.value); }) .on('mouseover',function(){ d3.select(this).attr('fill','brown'); })任务二：柱形图交互式展示单位人数分布 .on('mouseout',function(){ d3.select(this).attr('fill','steelblue'); });

//添加x轴 g.append('g') .attr('class','axisaxis--x') .attr('transform','translate(0,'+height+')') .call(d3.axisBottom(x));

//添加y轴 g.append('g') .attr('class','axisaxis--y') .call(d3.axisLeft(y).ticks(10)) .append('text') .attr('class','label') .attr('transform','rotate(-90)') .attr('y',-40)//控制位置 .attr('dy','1em')//微调偏移 .style('font-size','12px')//设置字体大小 .style('fill','#ff0000')//设置字体颜色 .text('人数');任务二：柱形图交互式展示单位人数分布

//添加数据标签 g.selectAll('.label') .data(dataset) .enter() .append('text') .attr('class','label') .attr('x',function(d){ returnx(d.postname)+x.bandwidth()/2; }) .attr('y',function(d){ returny(d.value)+35; }) //.attr('y',function(d){return5;}) .attr('text-anchor','middle') .text(function(d){ returnd.value; }); </script>任务二：柱形图交互式展示单位人数分布4.输入css代码，定义.bar属性设置矩形条的颜色，定义.bar:hover属性设置交互样式，定义.label设置标签文字的样式，定义#box1、#box、#box2等属性设置各容器显示的关系，定义.h2title属性设置标题的居中等效果。任务二：柱形图交互式展示单位人数分布css代码： <style> .bar{ fill:#f2d9ff; cursor:pointer; } .bar:hover{ fill:#55ffff; } .label{ font-size:16px; background-color:#ffaaff; } #box1{ width:600px; padding-top:10px;任务二：柱形图交互式展示单位人数分布 } #box2{ width:200px; padding-top:10px; background-color:#c0fffa; } #box{ display:flex; justify-content:space-evenly; width:800px; border:1pxsolidred; margin:0auto; } .h2title{ text-align:center; } </style>任务三：柱形图展示销售实际完成情况【任务分析】

编写网页实现应用柱形图示展示销售实际完成情况，如图6-20所示。1）依据数组变量dataset的值创建柱形图。 vardataset=[ {month:'1月',target:100,actual:90}, {month:'2月',target:120,actual:110}, {month:'3月',target:150,actual:130}, {month:'4月',target:130,actual:120}, {month:'5月',target:140,actual:135}, {month:'6月',target:160,actual:150} ];2）每个月设两个柱形，一个表示目标数，一个表示实际完成数。3）X轴表示月份，Y轴表示销售数。4）鼠标悬停于柱形图时，背景颜色更换样式。5）图表右侧显示对图表的文字说明。任务三：柱形图展示销售实际完成情况图6-20柱形图示展示销售实际完成情况任务三：柱形图展示销售实际完成情况【任务实施】1.启动HBuilderX，新建网站项目，在index.html文件中输入网页代码，导入d3js，应用html代码、JavaScript代码、style代码逐步在参考代码指引下实现图表功能，如图6-21所示。图6-21在index.html文件中输入网页代码任务三：柱形图展示销售实际完成情况2.输入html代码，设置h2标签显示标题，设置<divid="box">标签包含<divid="box1">和<divid="box2">标签，其中<divid="box1">标签用于显示图表，<divid="box2">标签用于显示说明文字。html代码： <h2class="h2title">1-6月份营销目标与实际完成情况</h2> <divid="box"> <divid="box1"> </div> <divid="box2">

说明：

下方柱状图展示了1-6月份的营销目标与实际完成情况 </div> </div>任务三：柱形图展示销售实际完成情况3.输入JavaScript代码，定义dataset变量存储图表数组，再逐步实现创建SVG容器、设置SVG容器的宽度、绘制目标矩形条和完成矩形条、设置x,y比例尺、添加数据标签等功能。JavaScript代码： <script> //数据集 vardataset=[ {month:'1月',target:100,actual:90}, {month:'2月',target:120,actual:110}, {month:'3月',target:150,actual:130}, {month:'4月',target:130,actual:120}, {month:'5月',target:140,actual:135}, {month:'6月',target:160,actual:150} ];

//创建SVG容器任务三：柱形图展示销售实际完成情况 varsvgWidth=800, svgHeight=500; varmargin={ top:20, right:20, bottom:50, left:40 }; varwidth=svgWidth-margin.left-margin.right; varheight=svgHeight-margin.top-margin.bottom;

varsvg=d3.select('#box1')//把svb添加到box1容器中 .append('svg') .attr('width',svgWidth) .attr('height',svgHeight);

varg=svg.append('g') .attr('transform','translate('+margin.left+','+margin.top+')');

//设置x,y比例尺任务三：柱形图展示销售实际完成情况 varx=d3.scaleBand().range([0,width]).padding(0.1); vary=d3.scaleLinear().range([height,0]);

x.domain(dataset.map(function(d){ returnd.month; })); y.domain([0,d3.max(dataset,function(d){ returnMath.max(d.target,d.actual); })]);

//绘制矩形条-目标 g.selectAll('.bar.target') .data(dataset) .enter() .append('rect') .attr('class','bartarget') .attr('x',function(d){ returnx(d.month); })任务三：柱形图展示销售实际完成情况 .attr('y',function(d){ returny(d.target); }) .attr('width',x.bandwidth()/2) .attr('height',function(d){ returnheight-y(d.target); });

//绘制矩形条-实际完成 g.selectAll('.bar.actual') .data(dataset) .enter() .append('rect') .attr('class','baractual') .attr('x',function(d){ returnx(d.month)+x.bandwidth()/2; }) .attr('y',function(d){ returny(d.actual);任务三：柱形图展示销售实际完成情况 }) .attr('width',x.bandwidth()/2) .attr('height',function(d){ returnheight-y(d.actual); });

//添加x轴 g.append('g') .attr('class','axisaxis--x') .attr('transform','translate(0,'+height+')') .call(d3.axisBottom(x));

//添加y轴 g.append('g') .attr('class','axisaxis--y') .call(d3.axisLeft(y).ticks(10)) .append('text') .attr('class','label')任务三：柱形图展示销售实际完成情况 .attr('transform','rotate(-90)') .attr('y',6) .attr('dy','0.71em') .attr('text-anchor','end') .text('销售数量');

//添加数据标签-目标值 g.selectAll('.label.target') .data(dataset) .enter() .append('text') .attr('class','labeltarget') .attr('x',function(d){ returnx(d.month)+x.bandwidth()/4; }) .attr('y',function(d){ returny(d.target)-5; }) .attr('text-anchor','middle')任务三：柱形图展示销售实际完成情况 .text(function(d){ returnd.target; });

//添加数据标签-实际完成值 g.selectAll('.label.actual') .data(dataset) .enter() .append('text') .attr('class','labelactual') .attr('x',function(d){ returnx(d.month)+3*x.bandwidth()/4; }) .attr('y',function(d){ returny(d.actual)-5; }) .attr('text-anchor','middle') .text(function(d){ returnd.actual; }); </script>任务三：柱形图展示销售实际完成情况4.输入css代码，定义.bar、.actual等标签样式。css代码： <style> .bar{ fill:#f2d9ff; cursor:pointer; } .actual{ fill:#00aaff; cursor:pointer; } .bar:hover{ fill:brown; }

.label{ font-size:20px; fill:black; text-anchor:middle; }

任务三：柱形图展示销售实际完成情况

#box2{ width:200px; padding-top:10px; background-color:#c0fffa; }

#box{ display:flex; justify-content:space-evenly; width:1000px; border:1pxsolid#e2e2e2; margin:20pxauto; } .h2title{ text-align:center; } </style>任务四：水平柱形图展示城市问卷结果【任务分析】编写网页实现应用水平柱形图展示城市问卷结果，如图6-23所示。1）依据数组变量dataset的值创建水平柱形图。vardata=[{city:"深圳",Numbervotes:2154},{city:"厦美",Numbervotes:2424},{city:"广州",Numbervotes:1504},{city:"上海",Numbervotes:1303},{city:"杭州",Numbervotes:1981}];2）每个水平的柱形图表示一个城市的问卷数。3）X轴表示问卷数，Y轴表示城市。4）鼠标悬停于柱形图时，背景颜色更换样式。任务四：水平柱形图展示城市问卷结果图6-23应用水平柱形图展示城市问卷结果任务四：水平柱形图展示城市问卷结果【任务实施】1.启动HBuilderX，新建网站项目，在index.html文件中输入网页代码，导入d3js，应用html代码、JavaScript代码、style代码逐步在参考代码指引下实现图表功能，如图6-24所示。图6-24在index.html文件中输入网页代码任务四：水平柱形图展示城市问卷结果2.参考网页代码，输入html代码，JavaScript代码、css代码实现图表效果。。网页代码：<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>最喜欢城市调查问卷展示</title><scriptsrc="./js/d3js.js"></script><style>.bar{fill:steelblue;}.bar:hover{fill:#ff5500; cursor:pointer;} 任务四：水平柱形图展示城市问卷结果 .bar-label{ fill:#ffff7f; font-size:22px; text-anchor:middle; } #chart{ margin:0auto; background-color:#ffd8eb; text-align:center; } h2{ text-align:center; }</style></head><body><h2>最喜欢城市调查问卷展示</h2>任务四：水平柱形图展示城市问卷结果<divid="chart"></div><script>vardata=[{city:"深圳",Numbervotes:2154},{city:"厦美",Numbervotes:2424},{city:"广州",Numbervotes:1504},{city:"上海",Numbervotes:1303},{city:"杭州",Numbervotes:1981}];varmargin={top:20,right:30,bottom:40,left:150},width=600-margin.left-margin.right,height=400-margin.top-margin.bottom;

vary=d3.scaleBand().range([height,0]).padding(0.1)任务四：水平柱形图展示城市问卷结果.domain(data.map(function(d){returnd.city;}));varx=d3.scaleLinear().range([0,width]).domain([0,d3.max(data,function(d){returnd.Numbervotes;})]);varsvg=d3.select("#chart").append("svg").attr("width",width+margin.left+margin.right).attr("height",height+margin.top+margin.bottom).append("g").attr("transform","translate("+margin.left+","+margin.top+")");svg.selectAll(".bar").data(data)任务四：水平柱形图展示城市问卷结果.enter().append("rect").attr("class","bar").attr("x",0).attr("y",function(d){returny(d.city);}).attr("width",function(d){returnx(d.Numbervotes);}).attr("height",y.bandwidth());svg.selectAll(".bar-label").data(data).enter().append("text").attr("class","bar-label")任务四：水平柱形图展示城市问卷结果.attr("x",function(d){returnx(d.Numbervotes)/2;}).attr("y",function(d){returny(d.city)+y.bandwidth()/2+10;}).text(function(d){returnd.Numbervotes;})svg.append("g").call(d3.axisLeft(y));svg.append("g").attr("transform","translate(0,"+height+")").call(d3.axisBottom(x));</script></body></html>任务五：饼形图展示各类商品销售占比【任务分析】编写网页实现应用饼形图展示各类商品销售占比，如图6-26所示。1）依据数组变量dataset的值创建饼形图。vardataset=[{category:'水果蔬菜类',value:30},{category:'肉类熟食类',value:20},{category:'面包糕点类',value:25},{category:'冷冻食品类',value:15},{category:'粮油副食类',value:10}];2）每个饼形图的扇形对应一类商品的数据。3）第二个扇形设置偏离效果。任务五：饼形图展示各类商品销售占比图6-26应用饼形图展示城各类商品销售占比任务五：饼形图展示各类商品销售占比【任务实施】1.启动HBuilderX，新建网站项目，在index.html文件中输入网页代码，导入d3js，应用html代码、JavaScript代码、style代码逐步在参考代码指引下实现图表功能，如图6-27所示。图6-27在index.html文件中输入网页代码任务五：饼形图展示各类商品销售占比2.参考网页代码，输入html代码，JavaScript代码、css代码实现饼形图表效果。。网页代码：<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>饼形图</title><scriptsrc="./js/d3js.js"></script><style>svg{width:100%;height:auto;} #box{ width:600px; margin:0auto;任务五：饼形图展示各类商品销售占比 background-color:#d8f5ff; } h2{text-align:center;} .arctxt{ font-size:26px; }</style></head><body><h2>各类商品销售比例</h2><divid="box"></div><script>vardataset=[{category:'水果蔬菜类',value:30},{category:'肉类熟食类',value:20},任务五：饼形图展示各类商品销售占比{category:'面包糕点类',value:25},{category:'冷冻食品类',value:15},{category:'粮油副食类',value:10}];varwidth=600;varheight=400;varradius=Math.min(width,height)/2;varcolor=d3.scaleOrdinal(d3.schemeCategory10);varsvg=d3.select("#box").append("svg").attr("width",width).attr("height",height).append("g").attr("transform","translate("+width/2+","+height/2+")");

varpie=d3.pie()任务五：饼形图展示各类商品销售占比.value(function(d){returnd.value;});varpath=d3.arc().outerRadius(radius-10).innerRadius(0);varlabel=d3.arc().outerRadius(radius-40).innerRadius(radius-40);vararc=svg.selectAll(".arc").data(pie(dataset)).enter().append("g").attr("class","arc");arc.append("path").attr("d",path).attr("fill",function(d){returncolor(d.data.category);})任务五：饼形图展示各类商品销售占比.attr("transform",function(d,i){if(i===1){//偏离第二个扇形varoffset=20;//调整偏离角度varmidAngle=(d.startAngle+d.endAngle)/2;varx=Math.cos(midAngle-offset)*10;vary=Math.sin(midAngle-offset)*30;return"translate("+x+","+y+")";}return"";});arc.append("text").attr("transform",function(d){return"translate("+label.centroid(d)+")";}) .attr('class','arctxt').text(function(d){returnd.data.value+'%';});</script></body></html>任务六：饼形图添加图例与交互应用【任务分析】编写网页实现应用饼形图添加图例与交互应用，如图6-28所示。1）创建一个各类商品销售占经的饼形图。2）添加图例。3）设置交互效果，当鼠标悬停扇形时，扇形突出显示。图6-28应用饼形图添加图例与交互应用任务六：饼形图添加图例与交互应用【任务实施】1.启动HBuilderX，新建网站项目，在index.html文件中输入网页代码，导入d3js，应用html代码、JavaScript代码、style代码逐步在参考代码指引下实现图表功能，如图6-29所示。图6-29在index.html文件中输入网页代码任务六：饼形图添加图例与交互应用2.参考网页代码，输入html代码，JavaScript代码、css代码实现图表效果。。网页代码：<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>饼形图</title><scriptsrc="./js/d3js.js"></script><style>svg{width:100%;height:auto;} #box{ width:600px; margin:0auto; background-color:#d8f5ff; }任务六：饼形图添加图例与交互应用 h2{text-align:center;} .arctxt{ font-size:26px; }.legend{display:flex;justify-content:center;align-items:center; margin:10pxauto; background-color:#55ff7f; width:600px; font-size:12px;}.legend-item{display:flex;align-items:center;任务六：饼形图添加图例与交互应用margin-right:20px;}.legend-color{width:20px;height:20px;margin-right:5px;}</style></head><body><h2>各类商品销售比例</h2><divid="box"></div><divclass="legend"></div><script>vardataset=[{category:'水果蔬菜类',value:30},{category:'肉类熟食类',value:20},任务六：饼形图添加图例与交互应用{category:'面包糕点类',value:25},{category:'冷冻食品类',value:15},{category:'粮油副食类',value:10}];varwidth=600;varheight=400;varradius=Math.min(width,height)/2;varcolor=d3.scaleOrdinal(d3.schemeCategory10);varsvg=d3.select("#box").append("svg").attr("width",width).attr("height",height).append("g").attr("transform","translate("+width/2+","+height/2+")");varpie=d3.pie().value(function(d){returnd.value;});任务六：饼形图添加图例与交互应用varpath=d3.arc().outerRadius(radius-10).innerRadius(0);varlabel=d3.arc().outerRadius(radius-40).innerRadius(radius-40);vararc=svg.selectAll(".arc").data(pie(dataset)).enter().append("g").attr("class","arc");arc.append("path").attr("d",path).attr("fill",function(d){returncolor(d.data.category);}).attr("class","arc-path")//添加类名以便后续操作.on("mouseover",function(d){任务六：饼形图添加图例与交互应用d3.select(this).attr("fill","orange");//鼠标悬停时变化颜色 d3.select(this).attr("cursor","pointer");//鼠标悬停时变化颜色d3.select(this).attr("d",d3.arc().outerRadius(radius+5).innerRadius(0));//扇形样式变化}).on("mouseout",function(d){d3.select(this).attr("fill",function(d){returncolor(d.data.category);});//鼠标移开恢复原色d3.select(this).attr("d",path);//恢复扇形样式});arc.append("text").attr("transform",function(d){return"translate("+label.centroid(d)+")";}) .attr('class','arctxt').text(function(d){returnd.data.value+'%';});

任务六：饼形图添加图例与交互应用varlegend=d3.select(".legend").selectAll(".legend-item").data(dataset).enter().append("div").attr("class","legend-item");legend.append("div").attr("class","legend-color").style("background-color",function(d){returncolor(d.category);});legend.append("div").attr("class","legend-text").text(function(d){returnd.category;});</script></body></html>任务七：折线图展示进店人数【任务分析】编写网页实现应用折线图展示进店人数，如图6-31所示。1）现有一周的进店人数数据存储在变量dataset中。。vardataset=[{day:'周一',count:20},{day:'周二',count:76},{day:'周三',count:60},{day:'周四',count:82},{day:'周五',count:40},{day:'周六',count:50},{day:'周日',count:35}];2）折线上标注数据。3）折线上每个数据点显示圆点。4）水平数轴显示日期（周一至周日）。任务七：折线图展示进店人数图6-31应用折线图展示进店人数任务七：折线图展示进店人数【任务实施】1.启动HBuilderX，新建网站项目，在index.html文件中输入网页代码，导入d3js，应用html代码、JavaScript代码、style代码逐步在参考代码指引下实现图表功能，如图6-32所示。图6-32在index.html文件中输入网页代码任务七：折线图展示进店人数2.参考网页代码，输入html代码，JavaScript代码、css代码实现图表效果。。网页代码：<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>每天店面进店人数变化</title><scriptsrc="./js/d3js.js"></script><style>svg{width:100%;height:auto;background-color:#F5F5F5;/*设置背景色*/}h2{text-align:center;}任务七：折线图展示进店人数</style></head><body><h2>每天店面进店人数变化</h2><divid="chart"></div><script>//数据集vardataset=[{day:'周一',count:20},{day:'周二',count:76},{day:'周三',count:60},{day:'周四',count:82},{day:'周五',count:40},{day:'周六',count:50},{day:'周日',count:35}];任务七：折线图展示进店人数//定义画布大小varwidth=600;varheight=400;//在页面上创建SVG元素varsvg=d3.select("#chart").append("svg").attr("width",width).attr("height",height);//定义x和y的比例尺varxScale=d3.scaleBand().domain(dataset.map(function(d){returnd.day;})).range([0,width]).paddingInner(0.1);varyScale=d3.scaleLinear().domain([0,d3.max(dataset,function(d){returnd.count;})*1.2])//调整y轴的范围.range([height,0]);任务七：折线图展示进店人数//创建折线生成器varline=d3.line().x(function(d){returnxScale(d.day)+xScale.bandwidth()/2;}).y(function(d){returnyScale(d.count);});//绘制折线svg.append

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论