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=" 500px; height: 300px;"> </div> </body> </html>