设为首页收藏本站

birt家园

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3245|回复: 0

RGraph 官方图表示例(十五)饼图

[复制链接]
发表于 2012-8-9 10:14:50 | 显示全部楼层 |阅读模式
这是RGraph 官方的饼图示例  
效果如下:


代码如下:
  1. <%@ include file="/common/tags.jsp"%>
  2. <%@ page contentType="text/html; charset=utf-8"%>
  3. <!DOCTYPE html>
  4. <html>
  5.     <head>
  6.         <title>RGraph: An example of the Pie chart</title>
  7.     <meta name="keywords" content="rgraph html5 canvas example pie charts" />
  8.     <meta name="description" content="An example of the Pie chart that RGraph can produce" />
  9.     <meta name="googlebot" content="NOODP">
  10.     <meta property="og:title" content="RGraph: HTML5 Javascript charts library" />
  11.     <meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
  12.     <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
  13.     <link rel="stylesheet" href="${ctx}/script/html5/rgraph/css/website.css" type="text/css" media="screen" />
  14.     <link rel="icon" type="image/png" href="${ctx}/script/html5/rgraph/images/favicon.png">
  15.     <!-- Place this tag in your head or just before your close body tag -->
  16.     <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
  17.     <script src="${ctx}/script/html5/rgraph/libraries/RGraph.common.core.js" ></script>
  18.     <script src="${ctx}/script/html5/rgraph/libraries/RGraph.pie.js" ></script>
  19.     <script src="${ctx}/script/html5/rgraph/libraries/RGraph.common.key.js" ></script>
  20.             <!--[if lt IE 9]><script src="${ctx}/script/html5/rgraph/excanvas/excanvas.original.js"></script><![endif]-->
  21.         <script>
  22.             $(function(){
  23.                 _createChart();
  24.             });
  25.             /**
  26.              * 饼图
  27.              */
  28.             function _createChart(){
  29.                var pie2 = new RGraph.Pie('pie2', [12,29,45,17,7]); // Create the pie object
  30.             pie2.Set('chart.gutter.left', 45);
  31.             pie2.Set('chart.colors', ['red', 'pink', '#6f6', 'blue', 'yellow']);
  32.             pie2.Set('chart.key', ['John (2%)', 'Richard (29%)', 'Fred (45%)', 'Brian (17%)', 'Peter (7%)']);
  33.             pie2.Set('chart.key.background', 'white');
  34.             pie2.Set('chart.strokestyle', 'white');
  35.             pie2.Set('chart.linewidth', 3);
  36.             pie2.Set('chart.exploded', [10,10,10,20,20]);
  37.             pie2.Set('chart.shadow', true);
  38.             pie2.Set('chart.shadow.offsetx', 0);
  39.             pie2.Set('chart.shadow.offsety', 0);
  40.             pie2.Set('chart.shadow.blur', 25);
  41.             pie2.Draw();
  42.         </script>
  43.     </head>
  44.     <body>
  45.         <script>
  46.             if (RGraph.isOld()) {
  47.                 document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
  48.             }
  49.         </script>
  50.         <div style="text-align: center">
  51.         <canvas id="pie2" width="550" height="300">[No canvas support]</canvas>
  52.     </div>
  53.     </div>
  54. </body>
  55. </html>
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|birt家园    

GMT+8, 2020-8-7 17:11 , Processed in 0.260447 second(s), 19 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表