请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 查看内容

HTML5 RGraph 第十五章 绘制雷达图

2013-11-11 23:48| 发布者: mydream| 查看: 1554| 评论: 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  绘制雷达图

完整代码如下:
  1. <!DOCTYPE html>   
  2. <head>   
  3. <meta charset="UTF-8">  
  4. <title>使用RGraph插件制作雷达图</title>  
  5. <script src="RGraph.common.core.js"></script>
  6. <script src="RGraph.tradar.js"></script>
  7. <script>
  8. function window_onload()
  9. {
  10.     //绘制雷达图,获取数据
  11.     var tradar=new RGraph.Tradar('myCanvas',[12,13,14,15,29,17]);
  12.     //指定雷达图标题
  13.     tradar.Set('chart.title', '2010年常州第一百货公司彩电销售分布图');
  14.     //指定标签文字
  15.     tradar.Set('chart.labels', ['长虹(12%)', '康佳(13%)', '创维(14%)', '三星(15%)','夏普(29%)','索尼(17%)']);
  16.     //指定绘制背景灰色圆圈
  17.     tradar.Set('chart.background.circles', true);
  18.     //指定雷达图颜色
  19.     tradar.Set('chart.color', 'rgba(255,0,0,0.5)');
  20.     //指定中央圆圈值为5
  21.     tradar.Set('chart.circle',5);
  22.     //指定中央圆圈的填充颜色
  23.     tradar.Set('chart.circle.fill', 'rgba(200,255,200,0.5)');
  24.     //绘制雷达图
  25.     tradar.Draw();
  26. }
  27. </script>
  28. </head>  
  29. <body onload="window_onload()">  
  30. <h1>使用RGraph插件制作雷达图</h1>  
  31. <canvas id="myCanvas" width="700" height="400">
  32.      [您的浏览器不支持canvas元素]
  33. </canvas>
  34. </body>  
  35. </html>
复制代码





鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2020-1-29 03:45 , Processed in 0.122046 second(s), 36 queries .

返回顶部