HTML5 RGraph 第十五章绘制雷达图

2013-11-11 23:48| 发布者: mydream| 查看: 1969| 评论: 0|原作者: mydream

摘要: HTML5 RGraph绘制雷达图本节介绍如何使用RGraph插件绘制雷达图。在讲解示例程序前，先来看一下在绘制雷达图时所用到的属性。绘制雷达图时所用到的属性除了前面所讲到的绘制所有统计图时用到的属性外，绘 ...

HTML5 RGraph 绘制雷达图
本节介绍如何使用RGraph插件绘制雷达图。在讲解示例程序前，先来看一下在绘制雷达图时所用到的属性。

绘制雷达图时所用到的属性
除了前面所讲到的绘制所有统计图时用到的属性外，绘制雷达图时将会用到的属性如下所示。
口chart.colors.alpha
指定值的范围为0到l1，用来指定雷达图中使用颜色的透明度。默认值为null
口chart.ymax
用于指定Y坐标轴上数字的最大值。如果不指定，则该值将被自动计算出来。默认值为null（自动计算）
口chart.background.circles
用于指定是否绘制灰色背景圆圈。默认值为true
口chart.linewidth
用于指定边框线的线宽。默认值为1。
口chart.circle
用于指定雷达图中心圆圈的值。默认值为0
口chart.circle.fill
用于指定雷达图中心圆圈的填充颜色。默认值为red。
口chart.circle.stroke
用于指定雷达图中心圆圈的边框颜色。默认值为black。

示例程序接下来介绍一个绘制雷达图的示例程序。该示例程序反映了常州第一百货公司201 1年各种彩电的销售百分比。如下图所示：
HTML5 RGraph 绘制雷达图

完整代码如下：

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>使用RGraph插件制作雷达图</title>
<script src="RGraph.common.core.js"></script>
<script src="RGraph.tradar.js"></script>
<script>
function window_onload()
{
//绘制雷达图，获取数据
var tradar=new RGraph.Tradar('myCanvas',[12,13,14,15,29,17]);
//指定雷达图标题
tradar.Set('chart.title', '2010年常州第一百货公司彩电销售分布图');
//指定标签文字
tradar.Set('chart.labels', ['长虹（12%）', '康佳（13%）', '创维（14%）', '三星（15%）','夏普（29%）','索尼（17%）']);
//指定绘制背景灰色圆圈
tradar.Set('chart.background.circles', true);
//指定雷达图颜色
tradar.Set('chart.color', 'rgba(255,0,0,0.5)');
//指定中央圆圈值为5
tradar.Set('chart.circle',5);
//指定中央圆圈的填充颜色
tradar.Set('chart.circle.fill', 'rgba(200,255,200,0.5)');
//绘制雷达图
tradar.Draw();
}
</script>
</head>
<body onload="window_onload()">
<h1>使用RGraph插件制作雷达图</h1>
<canvas id="myCanvas" width="700" height="400">
[您的浏览器不支持canvas元素]
</canvas>
</body>
</html>