highcharts图表高级入门之polar：极地图的基本配置以及一些关键配置说明

highcharts图表组件内的极地图polar的实现和效果都还是很简单和美观的。 1、需要设置chart的polar属性为true；以表示是极地图； 2、其他的设置和普通图表就没什么区别了的，这里附上一个完整的示例代码：

highcharts图表组件内的极地图polar的实现和效果都还是很简单和美观的。

1、需要设置chart的polar属性为true；以表示是极地图；

2、其他的设置和普通图表就没什么区别了的，这里附上一个完整的示例代码：

[html]  view plain  copy

1. $(function () {  
2.     $('#container').highcharts({  
3.         chart: {  
4.           BackgroundColor:'#FFFF00',      
5.            plotBorderColor:'#FFE4B5',     
6.            //plotBackgroundColor:'#FFFF00',  
7.            polar: true,  
8.            type: 'line'  
9.         },  
10.           
11.         title: {  
12.             text: '测试结果只作为参考数值',  
13.             x: -50  
14.         },  
15.         pane: {  
16.             size: '70%'  
17.         },  
18.           
19.         xAxis: {  
20.             categories: [ '钙(单位:mg)','维生素D<br />(单位:IU)', 'DHA(单位:mg)', '维生素A<br />(单位:IU)'],  
21.             labels: {  
22.                 style: {  
23.                     color: 'red',  
24.                     fontSize:'8px'  
25.                 }  
26.             },  
27.   
28.             tickmarkPlacement: 'on',  
29.             lineWidth: 0,  
30.             gridLineColor:'#FFFF00',  
31.             lineColor:'#24CBE5',  
32.         },  
33.               
34.         yAxis: {  
35.             gridLineInterpolation: 'polygon',  
36.             lineWidth: 0,  
37.             gridLineColor:'#FFFF00',  
38.             min: 0,  
39.             labels:{  
40.                 enabled:false //Y轴刻度值不显示  
41.             }  
42.         },  
43.           
44.         tooltip: {  
45.             enabled: true,  
46.             shared: true,  
47.             pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'  
48.         },        
49.         credits:{  
50.             enabled: false,  
51.         },        
52.         legend: {  
53.             align: 'center',  
54.             verticalAlign: 'top',  
55.             enabled: false,  
56.             y: 70,  
57.             layout: 'vertical'  
58.         },  
59.         exporting:{   
60.                      enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示   
61.                 },  
62.         plotOptions: {  
63.             enabled: false,  
64.             allowPointSelect: false,  
65.         },  
66.           
67.         series: [{  
68.             name: '用户测试',  
69.             data: [200, 300, 400, 500],  
70.              color: '#FF0000',  
71.             pointPlacement: 'on'  
72.         }, {  
73.             name: '标准',  
74.             data: [500, 500, 500, 500],  
75.              color: '#FFF68F',  
76.             pointPlacement: 'on'  
77.         }]  
78.       
79.     });  
80. });  

注意：

1、如果不需要显示y轴刻度值，可以通过设置yAxis内的labels标签，如下所示：

[html]  view plain  copy

1. labels:{  
2.                 enabled:false //Y轴刻度值不显示  
3. }  

2、如果不想显示数据点的提示框可以设置tooltip的enabled为false

[html]  view plain  copy

1. tooltip: {  
2.             enabled: false  
3. }