这几天做公司一个活动,用到了highcharts。
这里贴一下代码,同时记录几个详细设置。
主要有隐藏输出按钮、版权声明,设置背景透明,设置隐藏比例为0的数据的标签文本。
$('#income-pie').highcharts({
chart: {
//plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor: 'rgba(0,0,0,0)'//设置背景透明
},
title: {
text: '',
align: 'center',
verticalAlign: 'middle',
},
//设置鼠标经过提示
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -20,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
},
//设置如果该部分数据为0,则不显示标签文字
formatter: function(){
if (this.percentage > 0) return this.point.name + '<br>' + fmoney(this.point.percentage,1) + "%";
}
},
startAngle: -180,
endAngle: 180,
//borderColor: '#FFFFFF',
borderWidth: 3,
center: ['50%', '50%']
}
},
//设置各部分图表颜色
colors: ['#68D7DC', '#9CEB9E', '#FFC20F', '#F87362'],
series: [{
type: 'pie',
name: '收益占比',
innerSize: '75%',
data: [
['日益升', dataObj.REP_USER_STATEMENT.RYS_YIELD * 100 / dataObj.REP_USER_STATEMENT.MONTHEND_YIELD],
['月益升', dataObj.REP_USER_STATEMENT.YYS_YIELD * 100 / dataObj.REP_USER_STATEMENT.MONTHEND_YIELD],
['年益升', dataObj.REP_USER_STATEMENT.NYS_YIELD * 100 / dataObj.REP_USER_STATEMENT.MONTHEND_YIELD],
['速兑通', dataObj.REP_USER_STATEMENT.SDT_YIELD * 100 / dataObj.REP_USER_STATEMENT.MONTHEND_YIELD],
]
}],
//隐藏输出按钮
exporting: {
enabled: false
},
//隐藏版权声明
credits: {
enabled: false
}
});
网友评论