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

HTML5星空

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

HTML5 RGraph 第十二章 绘制饼图

2013-11-11 16:12| 发布者: mydream| 查看: 4354| 评论: 37|原作者: mydream

摘要: HTML5 RGraph绘制饼图 绘制饼图时所用到的属性 本节具体介绍一下如何使用RGraph插件绘制饼图。在讲解示例前,先来了解一下在绘制饼图时所使用到的属性。 口chart.strokestyle 用来指定饼块与饼块之间分隔 ...
HTML5 RGraph  绘制饼图
绘制饼图时所用到的属性
    本节具体介绍一下如何使用RGraph插件绘制饼图。在讲解示例前,先来了解一下在绘制饼图时所使用到的属性。
    口chart.strokestyle
    用来指定饼块与饼块之间分隔线的颜色。使用背景色来设置该属性值,并且将线宽设置为5,可以使饼图具有分离效果。默认值为#999。
    口chart.labels.sticks
    用来设置是否在饼块与旁边的说明文字之间绘制一根短的连接线。默认值为false(不绘制)o
    口chart.labels.sticks.color
    用来指定饼块与旁边的说明文字之间短连接线的颜色。默认值为#aaao
    口chart.linewidth
    将该值设定为5,将chart.strokestyle的属性值设定为与背景色相同的值,可以使饼图具有分离效果。默认值为1。
    口chart.variant
    可以设定的值为pie与donut。将该值设定为donut时将绘制环形饼图。默认值为pie。

示例程序
    接下来介绍一个绘制饼图的示例程序,该示例程序表现的是2010年常州第一百货公司各种彩电销售数量的分布情况。
   效果图如下:



该示例程序中使用了工具条提示功能,当鼠标指针移动到某个饼块上时,这个饼块会呈现一个3D效果的突出显示,并且在该饼块上出现一个工具条提示信息。


完整代码如下:

  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.pie.js"></script>
  7. <script src="RGraph.common.tooltips.js"></script>
  8. <script>
  9. function window_onload()
  10. {
  11.     //绘制饼图,获取饼图数据
  12.     var pie=new RGraph.Pie('myCanvas',[12000,13000,14000,15000,30000,19000]);
  13.     //绘制饼图标题
  14.     pie.Set('chart.title', '2010年常州第一百货公司彩电销售分布图');
  15.     //绘制饼图标签文字
  16.     pie.Set('chart.labels', ['长虹(12%)', '康佳(13%)', '创维(14%)', '三星(15%)',
  17.     '夏普(29%)','索尼(17%)']);
  18.     //指定饼图分隔线宽
  19.     pie.Set('chart.linewidth', 5);
  20.     //指定饼图分隔线颜色
  21.     pie.Set('chart.strokestyle','white');
  22.     //指定工具条提示信息的出现效果为淡入效果
  23.     pie.Set('chart.tooltips.effect', 'fade');
  24.     //指定当鼠标指针在饼块上移动时出现工具条提示信息
  25.     pie.Set('chart.tooltips.event', 'onmousemove');
  26.     //指定工具条提示信息的文字
  27.     pie.Set('chart.tooltips', ['长虹(12%)','康佳(13%)','创维(14%)','三星(15%)',
  28.     '夏普(29%)','索尼(17%)']);
  29.     //指定工具条提示信息具有3d效果
  30.     pie.Set('chart.highlight.style', '3d');  
  31.     //绘制饼图
  32.     pie.Draw();
  33. }
  34. </script>
  35. </head>  
  36. <body onload="window_onload()">  
  37. <h1>使用RGraph插件制作饼图</h1>  
  38. <canvas id="myCanvas" width="700" height="400">
  39.      [您的浏览器不支持canvas元素]
  40. </canvas>
  41. </body>  
  42. </html>
复制代码

在这段示例代码中,使用在每个饼块旁添加说明文字的方法来对每个饼块所代表的含义进行说明。也可以使用图例的方法来对每个饼块进行说明。
另外,只需在饼图中添加使用chart.variant属性,并将该属性值设为“donut"(代码如下所示),即可绘制出环形饼图。
//绘制环形饼图
pie.Set(‘chart.variant‘,  ‘donut‘);

HTML5 RGraph  绘制环形饼图



使用getSegment方法
在绘制饼图时,可以通过obj .getSegment方法使开发者或用户知道哪个饼块被单击。该方法返回一个数组,其中存放以下信息:


1)获得被单击饼块在X轴上的坐标点。

2)获得被单击饼块在Y轴上的坐标点。
3)获得被单击饼块的绘制半径。
4)获得被单击饼块的起始绘制角度。
5)获得被单击饼块的结束绘制角度。


    下面介绍一个使用getSegment方法的示例。当饼块被单击时会在被单击饼块之上再绘制一个相同尺寸的白色半透明饼块,使被点击饼块呈现‘一种白色半透明的效果,如图



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.pie.js"></script>
  7. <script src="RGraph.common.tooltips.js"></script>

  8. <script>
  9. function window_onload()
  10. {
  11.     var pie=new RGraph.Pie('myCanvas',[12000,13000,14000,15000,30000,19000]);
  12.     //绘制饼图标题
  13.     pie.Set('chart.title', '2010年常州第一百货公司彩电销售分布图');
  14.     //绘制饼图图例
  15.     pie.Set('chart.key',  ['长虹(12%)', '康佳(13%)', '创维(14%)', '三星(15%)',
  16.     '夏普(29%)','索尼(17%)']);
  17.     //指定图例背景色
  18.     pie.Set('chart.key.background', 'white');
  19.     //指定饼块间的分隔线颜色
  20.     pie.Set('chart.linewidth', 5);
  21.     //绘制饼图
  22.     pie.Draw();
  23.     //注册控件
  24.     RGraph.Register(pie);
  25.     //指定饼图被点击时的函数
  26.     pie.canvas.onclick = function (e)
  27.     {
  28.         RGraph.FixEventObject(e);//注册事件
  29.         RGraph.Redraw();//重绘饼图

  30.         var canvas  = e.target;//获取绘制饼图的canvas元素
  31.         var context = canvas.getContext('2d');//获取绘制饼图的canvas元素的图形上下文对象
  32.         var obj     = canvas.__object__;//获取饼图对象
  33.         var segment = obj.getSegment(e);//获取被点击的饼块
  34.         
  35.         if (segment) //如果存在被点击的饼块
  36.         {
  37.             context.fillStyle = 'rgba(255,255,255,0.5)';//指定白色半透明颜色为填充色
  38.             context.beginPath();//开始创建路径
  39.                
  40.             //将角度转换为半径
  41.             segment[3] /= 57.29;
  42.             segment[4] /= 57.29;
  43.             
  44.             context.moveTo(segment[0], segment[1]);//将绘制起点移动到被点击的饼块处

  45.             //在被点击的饼块上再绘制相同尺寸的饼块
  46.             context.arc(segment[0], segment[1], segment[2], segment[3], segment[4], 0);
  47.             context.stroke();//绘制饼块边框
  48.             context.fill();//填充饼块
  49.             
  50.             e.stopPropagation();//阻止事件传播
  51.         }
  52.     }

  53. }
  54. //指定页面被点击时的函数
  55. window.onclick = function (e)
  56. {
  57.     RGraph.Redraw();//重绘饼图
  58. }
  59. </script>
  60. </head>  
  61. <body onload="window_onload()">  
  62. <h1>使用RGraph插件制作饼图</h1>  
  63. <canvas id="myCanvas" width="700" height="400">
  64.      [您的浏览器不支持canvas元素]
  65. </canvas>
  66. </body>  
  67. </html>
复制代码






鲜花

握手

雷人

路过

鸡蛋

相关阅读

发表评论

最新评论

引用 XRumerTest 2019-10-21 15:16
If you search on something compelling, halt this at fault




http://www.atichart.com/the-choosing-the-right-online-casino-mask/
引用 XRumerTest 2019-10-22 15:52
If you are looking on something enthralling, check this recognizable




http://www.newcandle.in/the-trick-for-best-military-strategy-games/
引用 Ric 2019-10-23 16:52
If you search to something compelling, watchdog this gone away from











https://www.laurus-kwiaty.pl/rumors-lies-and-free-3d-online-games/
引用 XRumerTest 2019-10-23 17:01
Whenever you search against something engaging, in control this gone away from




https://dekorasi.laksmiwedding.co.id/using-my-flash-game-history-to-work/
引用 XRumerTest 2019-10-24 15:23
When you are searching towards something captivating, hamper this observable




https://geeksubs.xyz/up-in-arms-about-free-3d-online-games/
引用 Ric 2019-10-24 20:43
If you are searching on something compelling, restrain this away from











https://www.exergue-conseil.fr/a-lethal-mistake-uncovered-on-enjoy-online-games/
引用 Ric 2019-10-25 00:26
If you search someone is concerned something riveting, check out this at blameworthy











https://overhear.net/blog/why-you-ought-to-use-this-online-games-for-free/
引用 Ric 2019-10-25 15:22
When you are searching to something captivating, halt this recognizable












http://www.assaadkhalaf.com/the-mysterious-secret-in-to-choosing-the-right/
引用 XRumerTest 2019-10-25 16:39
If you are looking against something spellbinding, guard this in default




http://www.kuralinsaat.com.tr/2019/10/10/factors-i-enjoy-free-3d-online-games/
引用 XRumerTest 2019-10-26 00:25
Whenever you search on the way something engaging, test this at censure




http://www.bidnshop.com/wp/main-2/if-nothing-is-read-by-you-else-today-study-this-2/
引用 Richardviend 2019-10-26 15:13
У нас диагностирует скважины, производит Водоснабжение частного дома.

У нас  вы можете приобрести МЕШАЛКИ, Емкости и резервуары с подогревом, Турбинные мешалки, Шнековые обезвоживатели осадка, Технические колодцы, Листовая загрузка, Тонкослойные отстойники, ОДЪЕМНЫЕ УСТРОЙСТВА И МЕТАЛЛОКОНСТРУКЦИИ Балки, Закладные, ВОДООЧИСТНОЕ ОБОРУДОВАНИЕ Гидроэлеватор, ПОДЪЕМНЫЕ УСТРОЙСТВА И МЕТАЛЛОКОНСТРУКЦИИ Нестандартные металлоконструкции, ОЧИСТКА ЛИВНЕВЫХ СТОЧНЫХ ВОД Сорбционные фильтры, НАСОСНОЕ И КОМПРЕССОРНОЕ ОБОРУДОВАНИЕ (Грунфос, КСБ, Вило, КИТ, Взлёт, ТВП) Погружные канализационные насосы, ВОДОПОДГОТОВКУ Промышленные установки обратного осмоса, а также все для автомойки Автомойки на базе песчанно-гравийной фильтрации.

У нас вы найдете ЛОС для промышленных предприятий, а также Смотровые колодцы, мы можем  произвести Монтаж насоса и настройка автоматики. Бурение неглубоких скважин, Геологическое изучение недр, Обслуживание систем водоснабжения.

Устранение засоров скважин  - Обслуживание скважин
引用 ScottNeash 2019-10-28 09:40
Может быть, на родительском собрание преподаватель заявил обеспокоенность тем, что у ребенка как правило бывают трудности с определенными речевыми и языковыми навыками. Или может быть вы в свое время беседуя с ребенком увидели неожиданное заикание? Вы поняли что это ненормально? И если так, что вы должны сделать? Все детки формируются по разному, и для одних трансформация с легких слов к хорошо выраженному и грамматически безошибочному предложению может понадобиться не один год,а иные чуть ли не сразу( к 1 году) начинают без умолка говорить. Но к 5 годам мальчик/девочка обязан(на) обладать способностью не только лишь излагать простые предложения, заключающиеся из двух, трёх слов, одновременно связно совершать длинные выражения. Осмотр только специалистом логопедом может помочь выяснить, есть ли у вашего малыша проблемы в речи. Kогопедическое занятие  - это помощь для подавляющего большинства деток с нарушениями речи и / или языка,или задержки психического развития.
Детям возможно потребуется помощь специалиста логопеда по всевозможным причинам, вам надлежит послать вашего ребёнка к специалисту, когда: " Вам либо другим людям тяжело понять ребенка. " Люди считают, что ребёнок младше, нежели они, так как он плохо говорит. " Школьника дразнят из-за того момента, каким образом он говорит. " Ребёнок во время разговора заикаится.
ПОЛИКЛИНИКА ЛЕЧЕНИЯ АУТИЗМА предназначен(а) для того, что бы вашему ребенку справиться с любыми проблемами речи и языка. Позвоните нам, приходите на ознакомительное занятие, и мы несомненно поможем вашему ребенку.

логопед дефектолог курсы переподготовки
引用 XRumerTest 2019-10-28 16:53
If you are looking on something compelling, in control this observable




http://origaadigital.com/10-most-incredible-information-online-games/
引用 Ric 2019-10-28 17:54
When you search on something captivating, analysis this at censure












http://demo.wpfilebase.com/who-else-desires-to-learn-about-flash-game-history/
引用 XRumerTest 2019-10-29 17:59
Whenever you are searching on something intriguing, hamper this into public notice




http://searchnrescuedesign.com/a-few-reasons-why-you-should-always-work-with-a/
引用 Ric 2019-10-29 18:04
Whenever you search near something captivating, trial this in neglect












https://globalconnectionmarkers.000webhostapp.com/?p=2312
引用 XRumerTest 2019-10-30 01:00
If you are looking near something engaging, test this in fault




https://haber.bursadanerede.com/2019/10/10/powerful-methods-for-free-kids-online-games-as-you.html
引用 Ric 2019-10-30 16:25
If you are searching on something irresistible, halt this out












http://tuoiteen.info/the-newest-fuss-about-enjoy-online-games/
引用 XRumerTest 2019-10-30 16:54
If you are looking shortly before something inviting, check this gone away from




http://148.70.74.230/6522

查看全部评论(37)

快讯

     京ICP备14042305号

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

GMT+8, 2019-11-18 08:30 , Processed in 0.162902 second(s), 37 queries .

返回顶部