1. 程式人生 > >jQuery 圖表外掛 jqChart 使用繪製雷達圖

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

需要顯示圖表的地方,只需使用一個<div>即可:
  1. <divid="jqChart"style="width: 500px; height: 300px;">
  2.         </div>

顯示結果如圖所示: