javascript hightcharts-蜘蛛图

Posted 2021-05-03

var chart = Highcharts.chart('container', {
	chart: {
		polar: true,
		type: 'line',
	},
	title: {
		text: '预算与支出',
		x: -40
	},
	pane: {
		size: '80%',
	},
	xAxis: {
		categories: ['销售', '市场营销', '发展', '客户支持'],
		tickmarkPlacement: 'on',
		lineWidth: 0,
		gridZIndex: 999999,
	},
	yAxis: {
		gridLineInterpolation: 'polygon',
		lineWidth: 0,
		min: 0,
		gridLineColor: 'none',
		gridZIndex: 999999,
		max: 100
	},
	tooltip: {
		shared: true,
		pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
	},
	legend: {
		align: 'right',
		verticalAlign: 'top',
		y: 70,
		layout: 'vertical'
	},
	series: [{
		name: '预算拨款',
		data: [100, 41.83, 98, 100],
		pointPlacement: 'on',
		type: 'area',
		fillOpacity: 1.0,
		color: 'rgba(255, 221, 181, 1.0)'
	}]
});
var colors = [ "rgba(229, 241, 248, 1.0)"];    
var parts = 4;
for(var i = 0; i < parts; i++) {
	centerX = chart.plotLeft + chart.yAxis[0].center[0];
	centerY = chart.plotTop + chart.yAxis[0].center[1];
	axisLength = chart.yAxis[0].height;
	angleOffset = -Math.PI/2;
	angleSegment = Math.PI/(parts/2);
	firstPointX = centerX + (axisLength * Math.cos(angleOffset + (angleSegment * i)));
	firstPointY = centerY + (axisLength * Math.sin(angleOffset + (angleSegment * i)));
	secondPointX = centerX + (axisLength * Math.cos(angleOffset + (angleSegment * (i+1))));
	secondPointY = centerY + (axisLength * Math.sin(angleOffset + (angleSegment * (i+1))));                                                                                       
	chart.renderer.path([
		'M', centerX, centerY, 
		'L', firstPointX, firstPointY,
		'L', secondPointX, secondPointY,
		'Z'
	]).attr({
		fill: colors[i % colors.length],
		'stroke-width': 1,
		'opacity': 1
	}).add();
}