1. 程式人生 > >highcharts座標軸標籤格式化回撥函式formatter:function中引用series中的資料

highcharts座標軸標籤格式化回撥函式formatter:function中引用series中的資料

今天用 highcharts 做個蛛網圖,想將y列資料顯示在x軸標籤後面,但是沒在X軸定義函式裡面獲取過y列的資料,找不到資料,只好自己摸索,後來配合console.log()終於找到正確的方法了。

先查到試了些,chart.series[0].data[0].point.y; 之類的方法,皆是在 highcharts  屬性設定之外的 js程式碼中引用資料的,不合用。

查到部分資料有點啟發:用 this

正確的使用方法是: this.chart.series[0] ,同理,即可引用整個圖表的任意屬性和資料。詳見程式碼如下:

$('#container').highcharts({ 
			chart: {
				polar: true,
				type: 'area'
			},
			colors: ['#00ff4c'],
			credits:{enabled:false},
			legend:{enabled:false},   	    
			title: {
				text: '',
				x: 0
			},	    
			pane: {
				size: '80%'
			},	    
			xAxis: {
				categories: [1,2,3,4,5,6],
				tickmarkPlacement: 'on',
				lineWidth: 0,
				labels:{
					useHTML:true,
					formatter:function(){
						var y = this.chart.series[0].yData;
						//console.log(this.chart);
						var tr ="
namepollute"; var vl=""; switch(this.value*1) { case 1: vl='SO2:'+y[0]; break; case 2: vl='NO2:'+y[1]; break; case 3: vl='PM10:'+y[2]; break; case 4: vl='CO:'+y[3]; break; case 5: vl='O3
:'+y[4]; break; case 6: vl='PM2.5:'+y[5]; break; default: vl='Error'; break; } tr=tr.replace(/namepollute/,vl); return tr; } } }, yAxis: { gridLineInterpolation: 'polygon', lineWidth: 0, min: 0 }, tooltip: {enabled:false}, series: [{ name: 'IAQI', data: [10,16,52,56,32,22], pointPlacement: 'on', marker: { fillColor: '#BF0B23', radius: 1 } }] });

程式碼中還包含了格式化X軸標籤使用下標的愚蠢方法,請勿見笑。


此記!