Highcharts使用总结

这几天做公司一个活动,用到了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}: {point.percentage:.1f}%'
},
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 + '
' + 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 } });

你可能感兴趣的:(Highcharts使用总结)