module.exports = function(weekNormal,weekHeight,weekLow,monthNormal,monthHeight,monthLow){
//周
var weekNormaldataset = []
var weekHeightdataset = []
var weekLowdataset = []
weekNormaldataset[0] = weekNormal
weekNormaldataset[1] = 100 - weekNormaldataset[0]
weekHeightdataset[0] = weekHeight
weekHeightdataset[1] = 100 - weekHeightdataset[0]
weekLowdataset[0] = weekLow
weekLowdataset[1] = 100 - weekLowdataset[0]
//月
var monthNormaldataset = []
var monthHeightdataset = []
var monthLowdataset = []
monthNormaldataset[0] = monthNormal
monthNormaldataset[1] = 100 - monthNormaldataset[0]
monthHeightdataset[0] = monthHeight
monthHeightdataset[1] = 100 - monthHeightdataset[0]
monthLowdataset[0] = monthLow
monthLowdataset[1] = 100 - monthLowdataset[0]
var width = 100
var height = 100
//周
var svg = d3.select(".oneWeekNormal")
.append("svg")
.attr("width", width)
.attr("height", height)
var svg1 = d3.select(".oneWeekHeight")
.append("svg")
.attr("width", width)
.attr("height", height)
var svg2 = d3.select(".oneWeekLow")
.append("svg")
.attr("width", width)
.attr("height", height)
//月
var svg3 = d3.select(".oneMonthNormal")
.append("svg")
.attr("width", width)
.attr("height", height)
var svg4 = d3.select(".oneMonthHeight")
.append("svg")
.attr("width", width)
.attr("height", height)
var svg5 = d3.select(".oneMonthLow")
.append("svg")
.attr("width", width)
.attr("height", height)
var pie = d3.layout.pie()
//周
var weekNormalpiedata = pie(weekNormaldataset)
var weekHeightpiedata = pie(weekHeightdataset)
var weekLowpiedata = pie(weekLowdataset)
//月
var monthNormalpiedata = pie(monthNormaldataset)
var monthHeightpiedata = pie(monthHeightdataset)
var monthLowpiedata = pie(monthLowdataset)
var outerRadius = 50//外半径
var innerRadius = 40//内半径，为0则中间没有空白
var arc = d3.svg.arc() //弧生成器
.innerRadius(innerRadius) //设置内半径
.outerRadius(outerRadius)//设置外半径
var normalColor = ['#1BBD8F', '#E8EBED']
var heightColor = ['#FF455B', '#E8EBED']
var lowColor = ['#FF970C', '#E8EBED']
//周
var arcs = svg.selectAll("g")
.data(weekNormalpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")")
arcs.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return normalColor[i]
})
.attr("d",function(d){
return arc(d)
})
var arcs1 = svg1.selectAll("g")
.data(weekHeightpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")")
arcs1.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return heightColor[i]
})
.attr("d",function(d){
return arc(d)
})
var arcs2 = svg2.selectAll("g")
.data(weekLowpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")")
arcs2.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return lowColor[i]
})
.attr("d",function(d){
return arc(d)
})
//月
var arcs3 = svg3.selectAll("g")
.data(monthNormalpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")")
arcs3.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return normalColor[i]
})
.attr("d",function(d){
return arc(d)
})
console.log(arcs3)
var arcs4 = svg4.selectAll("g")
.data(monthHeightpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")")
arcs4.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return heightColor[i]
})
.attr("d",function(d){
return arc(d)
})
var arcs5 = svg5.selectAll("g")
.data(monthLowpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")")
arcs5.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return lowColor[i]
})
.attr("d",function(d){
return arc(d)
})
//周
arcs.append("text")
.attr("text-anchor","middle")
.text(function(d){
return weekNormaldataset[0]+"%"
})
arcs1.append("text")
.attr("text-anchor","middle")
.text(function(d){
return weekHeightdataset[0]+"%"
})
arcs2.append("text")
.attr("text-anchor","middle")
.text(function(d){
return weekLowdataset[0]+"%"
})
//月
arcs3.append("text")
.attr("text-anchor","middle")
.text(function(d){
return monthNormaldataset[0]+"%"
})
arcs4.append("text")
.attr("text-anchor","middle")
.text(function(d){
return monthHeightdataset[0]+"%"
})
arcs5.append("text")
.attr("text-anchor","middle")
.text(function(d){
return monthLowdataset[0]+"%"
})
}
}).call(this)
显示标记标签。将文本、时间等字段拖入维度栏，将数值拖入左值轴和右值轴，设置好标签和显示，在柱状图上午显示数据标签，只需要将标签设置为“显示标记标签”，在js中用显示标记标签将柱状统计图上的分类显示从上方移到下方。JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。d3.js 是专业的数据可视化工具chart.js 可以生成各种图表 http://www.bootcss.com/p/chart.js/docs/ 这是它的中文文档
如果不想用插件的话难度要翻倍
