Highcharts使用总结

2016-03-21  本文已影响235人  JasonQiao

这几天做公司一个活动,用到了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
}
});
上一篇下一篇

猜你喜欢

热点阅读