使用D3制作统计图表、线性图表、水平柱状图表、饼图 -- （二）面积图表

使用D3制作统计图表、线性图表、水平柱状图表、饼图 -- （二）面积图表

index.html(图表页面)

index.js(JS代码)var data = [0,34.45,45.534,556,76,87,234,234]generateLineChart(data,"#container") //D3生成面积图表 /** * @desc D3生成面积图表 */ function generateAreaChart(data, container) { var width = 500 //contianer元素宽度 var height = 250 //contianer元素高度 var margin = {left:50,top:30,right:20,bottom:20} //contianer元素边距 var g_width = width - margin.left - margin.right //svg元素高度 var g_height = height - margin- - margin.bottom //svg元素宽度 //在id为contanier的容器里添加svg元素，并设置宽度和高度 var svg = d3.select(container) .append("svg:svg") .attr("width", width+50) .attr("height", height) //获得添加后的svg元素，设置边距 var g = d3.select("svg") .append("g") .attr("transform", "translate("+margin.left+","+margin-+")") //指定x,y缩放比例 var x_scale = d3.scale.linear() .domain([0, data.length-1]) .range([0, g_width]) var y_scale = d3.scale.linear() .domain([0, d3.max(data)]) .range([g_height, 0]) //d元素属性值x,y坐标 var area_generator = d3.svg.area() .x(function(d,i){ return x_scale(i); }) .y0(g_height) .y1(function(d){ return y_scale(d); }) .interpolate("cardinal") //给svg元素添加path并设置d属性 d3.select("g") .append("path") .attr("d", area_generator(data)) .style("fill","steelblue") //添加横轴坐标轴 var x_axis = d3.svg.axis().scale(x_scale), y_axis = d3.svg.axis().scale(y_scale).orient("left") //添加x坐标轴并设置文字描述 g.append("g") .call(x_axis) .attr("transform", "translate(0,"+g_height+")") .append("text") .text("时间(天)") .attr("transform", "translate("+g_width+",0)") //添加y坐标轴并设置文字描述 g.append("g") .call(y_axis) .append("text") .text("销售总价(￥)") .attr("transform", "rotate(-90)") .attr("text-anchor", "end") .attr("dy", "1em") }

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。