美文网首页
Highcharts使用总结

Highcharts使用总结

作者: JasonQiao | 来源:发表于2016-03-21 20:11 被阅读235次

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

    相关文章

      网友评论

          本文标题:Highcharts使用总结

          本文链接:https://www.haomeiwen.com/subject/obwklttx.html