1. 程式人生 > >highcharts圖表高階入門之polar:極地圖的基本配置以及一些關鍵配置說明(轉載)

highcharts圖表高階入門之polar:極地圖的基本配置以及一些關鍵配置說明(轉載)

highcharts圖表元件內的極地圖polar的實現和效果都還是很簡單和美觀的。 1、需要設定chart的polar屬性為true;以表示是極地圖; 2、其他的設定和普通圖表就沒什麼區別了的,這裡附上一個完整的示例程式碼:

highcharts圖表元件內的極地圖polar的實現和效果都還是很簡單和美觀的。

1、需要設定chart的polar屬性為true;以表示是極地圖;

2、其他的設定和普通圖表就沒什麼區別了的,這裡附上一個完整的示例程式碼:

$(function () {
    $('#container').highcharts({
        chart: {
		  BackgroundColor:'#FFFF00',	
		   plotBorderColor:'#FFE4B5',	
		   //plotBackgroundColor:'#FFFF00',
	       polar: true,
	       type: 'line'
	    },
	    
	    title: {
	        text: '測試結果只作為參考數值',
	        x: -50
	    },
	    pane: {
	    	size: '70%'
	    },
	    
	    xAxis: {
	        categories: [ '鈣(單位:mg)','維生素D<br />(單位:IU)', 'DHA(單位:mg)', '維生素A<br />(單位:IU)'],
			labels: {
                style: {
                    color: 'red',
                    fontSize:'8px'
                }
            },

	        tickmarkPlacement: 'on',
	        lineWidth: 0,
			gridLineColor:'#FFFF00',
			lineColor:'#24CBE5',
	    },
	        
	    yAxis: {
	        gridLineInterpolation: 'polygon',
	        lineWidth: 0,
			gridLineColor:'#FFFF00',
	        min: 0,
            labels:{
                enabled:false //Y軸刻度值不顯示
            }
	    },
	    
	    tooltip: {
			enabled: true,
	    	shared: true,
	        pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
	    },		
		credits:{
			enabled: false,
		},	    
	    legend: {
	        align: 'center',
	        verticalAlign: 'top',
			enabled: false,
	        y: 70,
	        layout: 'vertical'
	    },
		exporting:{ 
                     enabled:false //用來設定是否顯示‘列印’,'匯出'等功能按鈕,不設定時預設為顯示 
                },
		plotOptions: {
	        enabled: false,
	        allowPointSelect: false,
	    },
	    
	    series: [{
	        name: '使用者測試',
	        data: [200, 300, 400, 500],
			 color: '#FF0000',
	        pointPlacement: 'on'
	    }, {
	        name: '標準',
	        data: [500, 500, 500, 500],
			 color: '#FFF68F',
	        pointPlacement: 'on'
	    }]
	
	});
});

注意:

1、如果不需要顯示y軸刻度值,可以通過設定yAxis內的labels標籤,如下所示:

labels:{
                enabled:false //Y軸刻度值不顯示
}

2、如果不想顯示資料點的提示框可以設定tooltip的enabled為false

tooltip: {
			enabled: false
}

原文來自http://www.stepday.com/topic/?682,感謝原文作者分享