2、在弹出的设置单元格格式对话框中，点击边框，点单元格边框斜线样式。
3、在单元格内，输入表头字段，如项目时间项目阶段，然后将鼠标放在“项目时间”后，使用ALT+ENTER实现强制换行。
4、通过空格键，将“项目时间”移至合适的位置，即可。jsecharts圆环饼状图中这样设置斜杠前后数据不一样的样式。
(function(){
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)
Chart.js允许通过HTML5的canvas进行图表绘制。这里我们希望绘制一个环形图，点击图上各segment时可以显示自定义的圆形tooltip。Chart.js支持通过几个变量添加tooltip，它提供一个tooltipTemplate但是却不支持自定义tooltip的HTML！于是决定自行绘制tooltip手动添加上去。
