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

xiaoxiao2021-02-28  105

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


``` 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' } } ]

转载请注明原文地址: https://www.6miu.com/read-63254.html

最新回复(0)