Highchart实现简单的环形分值图

/*****环形分值图*****/


function CreateCircle(x,_Data) {
   $(x).highcharts({
        chart: {
        type: 'pie',
            height:160,
            width:160,
            marginTop:4,
            backgroundColor:'white'
            
        },
    title:{
       text:'综合评分',
       y:50,
       style:{
           color:'#F87249',
           fontFamily:'黑体',
           fontSize:'16px',
           fontWeight:'bold'
       }
    },
    plotOptions: {
        pie: {
            size:130,//图表直径大小
                borderColor:null,
                dataLabels: {
                    distance:-66,
                    y:-2,
                    formatter:function(){
                    if(this.point.name == "other"){return "";} else{return Math.round(this.percentage);}
                    },
                style:{
                    fontFamily:"黑体",
                    fontSize:"42px",
                    color:"#F87249",
                    border:'1px solid orange'
                    }
                },
            innerSize:'90%',
                colors: [
                '#FA823F',
                '#FDD1C6'
                ]
            }
        },
    tooltip:{
        enabled:false
        },
    credits:{
            text:"",
            style:{
            color:"black"
            }
        },
   series: [{
       data:[['score',_Data],['other',100-_Data]]
   }]
    },function(chart){
        //在图表内的指定位置画一个圆
        //第一个参数表示圆心距离图表左侧边缘的距离值
        //第二个参数表示圆心距离图表上侧边缘的距离值
        //第三个参数表示圆半径大小
        chart.renderer.circle(70, 66, 60).attr({
            fill: '#FDFDFD',
            stroke: '#F87249',
            'stroke-width': 0
        }).add();
     });
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值