活动图中的图例无法正确加载自定义颜色

HIGHCHARTS
1

image
image2365×1090 112 KB

在活动图中开启图例后，没有办法正常显示颜色。求解！感谢

2 
// 去掉这里的注释就是类似 Apple Watch 上的效果了
// if (!Highcharts.theme) {
// 	Highcharts.setOptions({
// 		colors: ['#6bbb87', '#0b4f8e', '#8358b2','#a7c0d8'],
// 		title: {
// 			style: {
// 				color: 'silver'
// 			}
// 		},
// 		tooltip: {
// 			style: {
// 				color: 'silver'
// 			}
// 		}
// 	});
// }
Highcharts.chart('container', {
	chart: {
		type: 'solidgauge',
		spacingLeft:0,
		marginRight:100,
	},
	colors: ['#6bbb87', '#0b4f8e', '#8358b2','#a7c0d8'],
	title: {
		text: '',
		style: {
			fontSize: '24px'
		}
	},tooltip: {
		borderWidth: 0,
		backgroundColor: 'none',
		shadow: false,
		style: {
			fontSize: '16px'
		}
	},
	legend:{
		enabled:true,
		align: 'right',
		layout:'vertical',
		verticalAlign:'middle',
		itemMarginTop: 10,
		x:-30,
		labelFormatter:function (){
			this.color = '#6bbb87'
			console.log(this.color);
			return this.name
		}
	},
	pane: {
		startAngle: 0,
		endAngle: 360,
		background: [{ // Track for Move
			outerRadius: '100%',
			innerRadius: '90%',
			borderWidth: 0.5
		}, {
			outerRadius: '80%',
			innerRadius: '70%',
			borderWidth: 0.5
		}, { 
			outerRadius: '60%',
			innerRadius: '50%',
			borderWidth: 0.5
		},{ 
			outerRadius: '40%',
			innerRadius: '30%',
			borderWidth: 0.5
		}]
	},
	yAxis: {
		min: 0,
		max: 100,
		lineWidth: 0,
		tickPositions: []
	},
	plotOptions: {
		solidgauge: {
			borderWidth: '5px',
			dataLabels: {
				enabled: false
			},
			linecap: 'round',
			stickyTracking: false,
			rounded: true,
		},
		series: {
			showInLegend:true,
			events: {
				legendItemClick: function(e) {
					return false; // 直接 return false 即可禁用图例点击事件
				}
			}
		}
	},
	series: [{
		name: '正常',
		borderColor:'#6bbb87',
		data: [{
			color: '#6bbb87',
			radius: '100%',
			innerRadius: '93%',
			y: 80
		}]
	}, {
		name: '闲置',
		borderColor: Highcharts.getOptions().colors[1],
		data: [{
			color: Highcharts.getOptions().colors[1],
			radius: '80%',
			innerRadius: '72%',
			y: 65
		}]
	}, {
		name: '故障',
		borderColor: Highcharts.getOptions().colors[2],
		data: [{
			color: Highcharts.getOptions().colors[2],
			radius: '60%',
			innerRadius: '52%',
			y: 30
		}]
	}, {
		name: '失联',
		borderColor: Highcharts.getOptions().colors[3],
		data: [{
			color: Highcharts.getOptions().colors[3],
			radius: '40%',
			innerRadius: '32%',
			y: 30
		}]
	}]
},null);