标签：style blog http io ar color 使用 sp java
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>
标签：style blog http io ar color 使用 sp java
原文地址：http://www.cnblogs.com/d-17/p/4125342.html
