highcharts 仪表盘样式总结(gauge)

图1 圆环空缺部分(红框框部分)

空框子部分

          pane: {
                        startAngle: -150,
                        endAngle: 150,

                    }

pane中如果 startAngle: -180,endAngle: 180,就是完整的圆环

图2 圆环的环形的粗细(红线箭头部分)

这里写图片描述

  plotBands: [
                            {
                                from: 0,
                                to: 60,
                                color: '#5bc0de',
                                innerRadius: '100%',
                                outerRadius: '75%'
                            }


                        ]
                    },

plotBands中的innerRadius是内部圆环设置, outerRadius指的是外部与那换设置。100%-75%=25%

图3 圆环lable的字的位置(红框框部分)

这里写图片描述



   yAxis: {
                 labels: {                         
                            distance:10,
                            style:{
                                color:'#ccc',
                                fontSize: '15px',

                            }
                        }
                    },

yAxis–》labels–》distance 根据对圆心位置相对偏移, style部分是设置字体的颜色,大小

图4 圆环刻度上字的设置(红框框部分)

这里写图片描述

  yAxis: {

                        labels: {
                            step: 2,
                            rotation: 'auto',
                            style:{
                                color:'#fff',
                                fontSize: '18px',

                            }

                        },

               }

yAxis–》labels–》style 中设置颜色,字体大小

图5 圆环刻度线的显示(红框框部分)

这里写图片描述

    yAxis: {
                        min: 0,
                        max: 2000, //刻度0-2000
                        minorTickInterval: 'auto',

                        minorTickWidth: 2, //大刻度线宽度
                        minorTickLength: 10, //大刻度线长度
                        minorTickColor: 'transparent', //大刻度线长度
                        tickPixelInterval: 30, //小刻度线间隔
                        tickWidth: 1,//小刻度线宽度
                        tickPosition: 'inside', //小刻度线位置
                        tickColor: '#fff', //小刻度线颜色

                    }
图6 去掉一些某某网站啥啥啥链接(红框框部分)
    exporting: {
                        enabled:false
                    }

直接加exporting

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值