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

秒速五厘米 2021-09-12 07:38 151阅读 0赞

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

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

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

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

**\[html\]**  [view plain][]   [copy][view plain]

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][view plain]

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

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

**\[html\]**  [view plain][]   [copy][view plain]

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

[view plain]: http://blog.csdn.net/ningwang0206/article/details/27581033#