jQuery 图表插件 jqChart 使用

浏览数：21 / 时间：2015年06月09日

jQuery 图表插件 jqChart显示效果效果非常好。支持以下几种图表：

Area

Bar

Bubble

Column

Financial Chart - Candlestick

Financial Chart - Stock

Line

Pie

Radar Area

Radar Line

Radar Spline Area

Radar Spline

Scatter

Spline Area

Spline

Stacked Column

Stacked Bar

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.jqChart.css" />  
<link rel="stylesheet" type="text/css" href="css/jquery.jqRangeSlider.css" />  
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.21.css" />  
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>  
    <script src="js/jquery.mousewheel.js" type="text/javascript"></script>  
    <script src="js/jquery.jqChart.min.js" type="text/javascript"></script>  
    <script src="js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>  
    <!--[if IE]><script lang="javascript" type="text/javascript" src="js/excanvas.js"></script><![endif]-->  
<title>雷达图</title>
</head>

<body>
      
<script lang="javascript" type="text/javascript">  
    $(document).ready(function () {  

        var background = {  
            type: ‘linearGradient‘,  
            x0: 0,  
            y0: 0,  
            x1: 0,  
            y1: 1,  
            colorStops: [{ offset: 0, color: ‘#fff‘ }] //图表背景颜色
        };  

        $(‘#jqChart‘).jqChart({  
            title: { text: ‘Radar Area Chart‘ },  
            border: { strokeStyle: ‘#6ba851‘ },  
            background: background,  
            axes: [  
                    {  
                        type: ‘categoryAngle‘,  
                        categories: [‘性能‘, ‘外观‘, ‘价格‘] 
                    },  
                    {  
                        type: ‘linearRadius‘,  
                        renderStyle: ‘polygon‘,  
                        lineWidth: ‘1‘,  
                        minimum : 0,      //最小数值
                        maximum : 100,  //最大数值
                        interval : 20, //刻度

                          
                        majorTickMarks: { visible: true }  
                    }  
                  ],  
            series: [  
                        {  
                            title : ‘Series 1‘,  
                            type: ‘radarArea‘,  
                            data: [99, 80, 19], //参数  
                            fillStyle: ‘rgba(65,140,240,0.75)‘ //填充颜色 
                        } 
                    ]  
        });  
    });  
</script> 
<div id="jqChart" style="width: 500px; height: 300px;">  
</div>  
</body>
</html>