highcharts中的仪表盘刻度的区域用文字代替

来源：互联网发布：unity3d格式解包编辑：程序博客网时间：2024/05/16 03:39

显示该文字的位置，必须要有刻度，不然该文字会因为找不到位置而不显示

``` python                yAxis: {                    min: 0,                    max: 500,                    minorTickInterval: 'auto',                    minorTickWidth: 1,                    minorTickLength: 10,                    minorTickPosition: 'inside',                    minorTickColor: 'transparent',                    tickPixelInterval: 30,                    tickWidth: 2,                    tickPosition: 'inside',                    tickLength: 10,                    tickColor: 'transparent',                    tickPositions:['50','150','250','350','450'],                    // labels: {                    //    // step: 50,                    //     rotation: 'auto'                    //                    //                    //                    // },                    title: {                        // text: 'km/h'                    },                    plotBands: [                        {                            from: 0,                            to: 100,                            color: '#0c9fe2',                            innerRadius: '100%',                            outerRadius: '75%'                          /*  ,                            label: {                                text: '手动',                                rotation:'30',                                textAlign: 'center',                                verticalAlign:'bottom',                                x: 100,                                style: {                                    fontSize: '12px',                                    fontWeight: 600                                }                            }*/                        },                        {                            from: 100,                            to: 200,                            color: '#DDDF0D',                            innerRadius: '100%',                            outerRadius: '75%'                            /*,                            label: {                                text: '自动',                                rotation:'-60',                                textAlign: 'center',                                verticalAlign:'middle',                                x: 100                            }*/                        },                        {                            from: 200,                            to: 300,                            color:'#E3170D',                            innerRadius: '100%',                            outerRadius: '75%'                            /*,                            label: {                                text: 'MDI',                                rotation:'0',                                textAlign: 'center',                                verticalAlign:'middle',                                x: 250                            }                            */                        },                        {                            from: 300,                            to: 400,                            color:'#5cb85c',                            innerRadius: '100%',                            outerRadius: '75%'                            /*,                            label: {                                text: '编辑',                                rotation:'60',                                textAlign: 'center',                                verticalAlign:'bottom',                                x: 340                            }*/                        },                        {                            from: 400,                            to: 500,                            color:'#DDDF0D',                            innerRadius: '100%',                            outerRadius: '75%'                            /*,                            label: {                                text: '手摇',                                rotation:'150',                                textAlign: 'right',                                verticalAlign:'bottom',                                x: 300                            }*/                        }                    ],                    labels: {                        y:20,                        formatter: function () {                            console.log('-----')                            console.log(this.value+'');                            switch (this.value+''){                                case '50':                                    return '手动';                                case '150':                                    return '自动';                                case '250':                                    return 'MDI';                                case '350':                                    return '编辑';                                case '450':                                    return '手摇';                                default: return '';                            }                        },                        distance:30,                        style:{                            color:'#ccc',                            fontSize: '18px',                        }                    }                }

设定哪些区域显示什么名字，里面可以加字体旋转角度，要自己调整series: [                        {                            name: '系统操作模式',                            dataLabels:{                                    borderWidth: 0,                                   formatter:function(){                                       console.log('+++=====');                                        console.log(this.y);                                        var yy=this.y;                                        if(yy>0&&yy<=100){                                         return '手动';                                        }                                       if(yy>100&&yy<=200){                                           return '自动';                                       }                                       if(yy>200&&yy<=300){                                           return 'MDI';                                       }                                       if(yy>300&&yy<=400){                                           return '编辑';                                       }                                       if(yy>400&&yy<=500){                                           return '手摇';                                       }                                   },                                style:{"color": "contrast", "fontSize": "36px", "fontWeight": "bold", "textOutline": "1px 1px contrast" }                                },                            data: [                                {                                    name: '系统操作模式：',                                    y:datas,                                    sliced: true,                                    selected: true                                }                            ],                            tooltip: {                                // valueSuffix: ' km/h'                            }                        }                    ]

这里写图片描述

阅读全文

1 0