jQuery 图表插件 jqChart 使用绘制雷达图

转载：http://blog.csdn.net/leixiaohua1020/article/details/12650055

可见支持的种类非常之多。在这里我们使用一下Radar Area Chart（雷达图）。使用方式如下：

引入必要的文件，注意jQuery的js文件要放在最前面，版本不一定是1.5.1，比这个版本高也行。实际中根据示例代码修改相应的地方就行。

[javascript] view plain copy

1. <link rel="stylesheet" type="text/css" href="../css/jquery.jqChart.css" />  
2.     <link rel="stylesheet" type="text/css" href="../css/jquery.jqRangeSlider.css" />  
3.     <link rel="stylesheet" type="text/css" href="../themes/smoothness/jquery-ui-1.8.21.css" />  
4.     <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>  
5.     <script src="../js/jquery.mousewheel.js" type="text/javascript"></script>  
6.     <script src="../js/jquery.jqChart.min.js" type="text/javascript"></script>  
7.     <script src="../js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>  
8.     <!--[if IE]><script lang="javascript" type="text/javascript" src="../js/excanvas.js"></script><![endif]-->  
9.       
10.     <script lang="javascript" type="text/javascript">  
11.         $(document).ready(function () {  
12.   
13.             var background = {  
14.                 type: 'linearGradient',  
15.                 x0: 0,  
16.                 y0: 0,  
17.                 x1: 0,  
18.                 y1: 1,  
19.                 colorStops: [{ offset: 0, color: '#d2e6c9' },  
20.                              { offset: 1, color: 'white'}]  
21.             };  
22.   
23.             $('#jqChart').jqChart({  
24.                 title: { text: 'Radar Area Chart' },  
25.                 border: { strokeStyle: '#6ba851' },  
26.                 background: background,  
27.                 axes: [  
28.                         {  
29.                             type: 'categoryAngle',  
30.                             categories: ['France', 'Canada', 'Germany', 'USA', 'Italy', 'Spain', 'Russia', 'Sweden', 'Japan']  
31.                         },  
32.                         {  
33.                             type: 'linearRadius',  
34.                             renderStyle: 'polygon',  
35.                             lineWidth: '5',  
36.                             minimum : 0,  
37.                             maximum : 100,  
38.                             interval : 20,  
39.   
40.                               
41.                             majorTickMarks: { visible: true }  
42.                         }  
43.                       ],  
44.                 series: [  
45.                             {  
46.                                 title : 'Series 1',  
47.                                 type: 'radarArea',  
48.                                 data: [65.62, 75.54, 60.45, 34.73, 85.42, 55.9, 63.6, 55.1, 77.2],  
49.                                 fillStyle: 'rgba(65,140,240,0.75)'  
50.                             },  
51.                             {  
52.                                 title: 'Series 2',  
53.                                 type: 'radarArea',  
54.                                 data: [76.45, 23.78, 86.45, 30.76, 23.79, 35.67, 89.56, 67.45, 38.98],  
55.                                 fillStyle: 'rgba(252,180,65,0.75)'  
56.                             }  
57.                         ]  
58.             });  
59.         });  
60.     </script>  

需要显示图表的地方，只需使用一个<div>即可：

[html] view plain copy

1. <div id="jqChart" style="width: 500px; height: 300px;">  
2.         </div>  

显示结果如图所示：

 jqChart官方网站：http://www.jqchart.com/Default.aspx

jqChart下载：http://download.csdn.net/detail/leixiaohua1020/6377505