highcharts的yAxis标题过长分行显示

最新推荐文章于 2022-09-13 17:57:18 发布

Doubleu_

最新推荐文章于 2022-09-13 17:57:18 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/Doubleu_/article/details/84565645

版权

highcharts的yAxis标题过长加上这段就行啦

labels: {
		formatter: function() {
		//获取到刻度值
		var labelVal = this.value;
		//实际返回的刻度值
		var reallyVal = labelVal;
		//判断刻度值的长度
		if(labelVal.length > 2) {
		//截取刻度值
		reallyVal = labelVal.substr(0, 2) + "<br/>" +labelVal.substring(2, labelVal.length);
			}
			return reallyVal;
		}
	},

附上完整代码

var chart = Highcharts.chart('container', {
			chart: {
				polar: true,
			},
			title: {
				text: null
			},
			pane: {
				size: '80%'
			},
			xAxis: {
				categories: ['偿债能力', '应急能力', '储蓄能力', '财富增值',
					'支出健康', '家庭保障'
				],
				labels: {
					formatter: function() {
						//获取到刻度值
						var labelVal = this.value;
						//实际返回的刻度值
						var reallyVal = labelVal;
						//判断刻度值的长度
						if(labelVal.length > 2) {
							//截取刻度值
							reallyVal = labelVal.substr(0, 2) + "<br/>" + labelVal.substring(2, labelVal.length);
						}
						return reallyVal;
					}
				},
			tickmarkPlacement: 'on',
			lineWidth: 0
		},
		yAxis: {
			gridLineInterpolation: 'polygon',
			lineWidth: 0,
			min: 0
		},
		legend: {
			enabled: false
		},
		exporting: {
			enabled: false
		},
		credits: {
			enabled: false
		},

		series: [{
			name: '偿债能力',
			type: 'area',
			data: [43000, 19000, 60000, 35000, 17000, 10000],
			pointPlacement: 'on'
		}, {
			name: '应急能力',
			type: 'area',
			data: [50000, 39000, 42000, 31000, 26000, 14000],
			pointPlacement: 'on'
		}]
		});

效果图：