json文本
[
{
"name": "成都",
"sales": [
{
"year": "2002",
"profit": 20.49
},
{
"year": "2003",
"profit": 20.017
},
{
"year": "2004",
"profit": 19.27
},
{
"year": "2005",
"profit": 20.281
},
{
"year": "2006",
"profit": 21.839
},
{
"year": "2007",
"profit": 19.756
},
{
"year": "2008",
"profit": 20.368
},
{
"year": "2009",
"profit": 19.945
},
{
"year": "2010",
"profit": 20.798
},
{
"year": "2011",
"profit": 19.374
},
{
"year": "2012",
"profit": 20.64
},
{
"year": "2013",
"profit": 21.264
}
]
},
{
"name": "重庆",
"sales": [
{
"year": "2002",
"profit": 27.547
},
{
"year": "2003",
"profit": 27.107
},
{
"year": "2004",
"profit": 26.747
},
{
"year": "2005",
"profit": 27.835
},
{
"year": "2006",
"profit": 29.371
},
{
"year": "2007",
"profit": 26.465
},
{
"year": "2008",
"profit": 27.619
},
{
"year": "2009",
"profit": 27.406
},
{
"year": "2010",
"profit": 28.015
},
{
"year": "2011",
"profit": 27.481
},
{
"year": "2012",
"profit": 27.529
},
{
"year": "2013",
"profit": 29.032
}
]
},
{
"name": "广州",
"sales": [
{
"year": "2002",
"profit": 28.13
},
{
"year": "2003",
"profit": 30.035
},
{
"year": "2004",
"profit": 28.019
},
{
"year": "2005",
"profit": 29.32
},
{
"year": "2006",
"profit": 29.073
},
{
"year": "2007",
"profit": 29.953
},
{
"year": "2008",
"profit": 28.557
},
{
"year": "2009",
"profit": 28.965
},
{
"year": "2010",
"profit": 29.365
},
{
"year": "2011",
"profit": 28.902
},
{
"year": "2012",
"profit": 28.893
},
{
"year": "2013",
"profit": 28.659
}
]
},
{
"name": "南京",
"sales": [
{
"year": "2002",
"profit": 28.273
},
{
"year": "2003",
"profit": 29.028
},
{
"year": "2004",
"profit": 29.212
},
{
"year": "2005",
"profit": 28.676
},
{
"year": "2006",
"profit": 28.808
},
{
"year": "2007",
"profit": 28.692
},
{
"year": "2008",
"profit": 29.045
},
{
"year": "2009",
"profit": 28.44
},
{
"year": "2010",
"profit": 28.339
},
{
"year": "2011",
"profit": 28.622
},
{
"year": "2012",
"profit": 29.488
},
{
"year": "2013",
"profit": 30.459
}
]
},
{
"name": "上海",
"sales": [
{
"year": "2002",
"profit": 28.018
},
{
"year": "2003",
"profit": 29.224
},
{
"year": "2004",
"profit": 29.555
},
{
"year": "2005",
"profit": 29.129
},
{
"year": "2006",
"profit": 29.084
},
{
"year": "2007",
"profit": 29.232
},
{
"year": "2008",
"profit": 29.603
},
{
"year": "2009",
"profit": 28.56
},
{
"year": "2010",
"profit": 28.615
},
{
"year": "2011",
"profit": 29.253
},
{
"year": "2012",
"profit": 29.441
},
{
"year": "2013",
"profit": 30.623
}
]
},
{
"name": "武汉",
"sales": [
{
"year": "2002",
"profit": 28.721
},
{
"year": "2003",
"profit": 30.141
},
{
"year": "2004",
"profit": 29.365
},
{
"year": "2005",
"profit": 30.061
},
{
"year": "2006",
"profit": 29.797
},
{
"year": "2007",
"profit": 29.623
},
{
"year": "2008",
"profit": 29.287
},
{
"year": "2009",
"profit": 29.606
},
{
"year": "2010",
"profit": 29.556
},
{
"year": "2011",
"profit": 29.765
},
{
"year": "2012",
"profit": 30.605
},
{
"year": "2013",
"profit": 31.171
}
]
}
]代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="d3.js"></script>
<title>堆栈图</title>
</head>
<style>
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
<body>
<script>
d3.json("竞赛图.json", function (updata) {
var width = 700; //SVG绘制区域的宽度
var height = 500; //SVG绘制区域的高度
var svg = d3.select("body") //选择<body>
.append("svg") //在<body>中添加<svg>
.attr("width", width) //设定<svg>的宽度属性
.attr("height", height); //设定<svg>的高度属性
//2. 转换数据
var stack = d3.layout.stack()
.values(function (d) {
return d.sales;
})
.x(function (d) {
return d.year;
})
.y(function (d) {
return d.profit;
});
var data = stack(updata);
//3. 绘制
//外边框
var padding = {
left: 50,
right: 100,
top: 30,
bottom: 30
};
//创建x轴比例尺
var xRangeWidth = width - padding.left - padding.right;
var xScale = d3.scale.ordinal()
.domain(data[0].sales.map(function (d) {
return d.year;
}))
.rangeBands([0, xRangeWidth], 0.3);
//创建y轴比例尺
//（定义域的最大值）
var maxProfit = d3.max(data[data.length - 1].sales, function (d) {
return d.y0 + d.y;
});
//最大高度（值域的最大值）
var yRangeWidth = height - padding.top - padding.bottom;
var yScale = d3.scale.linear()
.domain([0, maxProfit]) //定义域
.range([0, yRangeWidth]); //值域
var area = d3.svg.area()
.x(function (d) {
return xScale(d.year) + xScale.rangeBand() / 2;
})
.y0(function (d) {
return yRangeWidth - yScale(d.y0);
})
.y1(function (d) {
return yRangeWidth - yScale(d.y0 + d.y);
})
.interpolate("basis");
//颜色比例尺
var color = d3.scale.category10();
//添加分组元素
var groups = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.style("fill", function (d, i) {
return color(i);
});
//添加区域
var areas = groups.append("path")
.attr("d", function (d) {
console.log(d.sales);
return area(d.sales);
})
.attr("transform", "translate(" + padding.left + "," + padding.top + ")");
//添加坐标轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
yScale.range([yRangeWidth, 0]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding.left + "," + (height - padding.bottom - yRangeWidth) +
")")
.call(yAxis);
//添加分组标签
var labHeight = 50;
var labRadius = 10;
var labelCircle = groups.append("circle")
.attr("cx", function (d) {
return width - padding.right * 0.98;
})
.attr("cy", function (d, i) {
return padding.top * 2 + labHeight * i;
})
.attr("r", labRadius);
var labelText = groups.append("text")
.attr("x", function (d) {
return width - padding.right * 0.8;
})
.attr("y", function (d, i) {
return padding.top * 2 + labHeight * i;
})
.attr("dy", labRadius / 2)
.text(function (d) {
return d.name;
});
});
</script>
</body>
</html>效果展示
版权声明：本文为weixin_62268437原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。