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年各种彩电的销售百分比。如下图所示:

完整代码如下:
- <!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>
复制代码
|