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效果的突出显示，并且在该饼块上出现一个工具条提示信息。
完整代码如下：
- <!DOCTYPE html>
- <head>
- <meta charset="UTF-8">
- <title>使用RGraph插件制作饼图</title>
- <script src="RGraph.common.core.js"></script>
- <script src="RGraph.pie.js"></script>
- <script src="RGraph.common.tooltips.js"></script>
- <script>
- function window_onload()
- {
- //绘制饼图，获取饼图数据
- var pie=new RGraph.Pie('myCanvas',[12000,13000,14000,15000,30000,19000]);
- //绘制饼图标题
- pie.Set('chart.title', '2010年常州第一百货公司彩电销售分布图');
- //绘制饼图标签文字
- pie.Set('chart.labels', ['长虹（12%）', '康佳（13%）', '创维（14%）', '三星（15%）',
- '夏普（29%）','索尼（17%）']);
- //指定饼图分隔线宽
- pie.Set('chart.linewidth', 5);
- //指定饼图分隔线颜色
- pie.Set('chart.strokestyle','white');
- //指定工具条提示信息的出现效果为淡入效果
- pie.Set('chart.tooltips.effect', 'fade');
- //指定当鼠标指针在饼块上移动时出现工具条提示信息
- pie.Set('chart.tooltips.event', 'onmousemove');
- //指定工具条提示信息的文字
- pie.Set('chart.tooltips', ['长虹（12%）','康佳（13%）','创维（14%）','三星（15%）',
- '夏普（29%)','索尼（17%）']);
- //指定工具条提示信息具有3d效果
- pie.Set('chart.highlight.style', '3d');
- //绘制饼图
- pie.Draw();
- }
- </script>
- </head>
- <body onload="window_onload()">
- <h1>使用RGraph插件制作饼图</h1>
- <canvas id="myCanvas" width="700" height="400">
- [您的浏览器不支持canvas元素]
- </canvas>
- </body>
- </html>
在这段示例代码中，使用在每个饼块旁添加说明文字的方法来对每个饼块所代表的含义进行说明。也可以使用图例的方法来对每个饼块进行说明。
另外，只需在饼图中添加使用chart．variant属性，并将该属性值设为“donut"（代码如下所示），即可绘制出环形饼图。
／／绘制环形饼图
pie.Set（‘chart.variant‘， ‘donut‘）；
使用getSegment方法
在绘制饼图时，可以通过obj .getSegment方法使开发者或用户知道哪个饼块被单击。该方法返回一个数组，其中存放以下信息：
1)获得被单击饼块在X轴上的坐标点。
2)获得被单击饼块在Y轴上的坐标点。
3)获得被单击饼块的绘制半径。
4)获得被单击饼块的起始绘制角度。
5)获得被单击饼块的结束绘制角度。
下面介绍一个使用getSegment方法的示例。当饼块被单击时会在被单击饼块之上再绘制一个相同尺寸的白色半透明饼块，使被点击饼块呈现‘一种白色半透明的效果，如图
完整代码如下：
- <!DOCTYPE html>
- <head>
- <meta charset="UTF-8">
- <title>使用RGraph插件制作饼图</title>
- <script src="RGraph.common.core.js"></script>
- <script src="RGraph.pie.js"></script>
- <script src="RGraph.common.tooltips.js"></script>
- <script>
- function window_onload()
- {
- var pie=new RGraph.Pie('myCanvas',[12000,13000,14000,15000,30000,19000]);
- //绘制饼图标题
- pie.Set('chart.title', '2010年常州第一百货公司彩电销售分布图');
- //绘制饼图图例
- pie.Set('chart.key', ['长虹（12%）', '康佳（13%）', '创维（14%）', '三星（15%）',
- '夏普（29%）','索尼（17%）']);
- //指定图例背景色
- pie.Set('chart.key.background', 'white');
- //指定饼块间的分隔线颜色
- pie.Set('chart.linewidth', 5);
- //绘制饼图
- pie.Draw();
- //注册控件
- RGraph.Register(pie);
- //指定饼图被点击时的函数
- pie.canvas.onclick = function (e)
- {
- RGraph.FixEventObject(e);//注册事件
- RGraph.Redraw();//重绘饼图
- var canvas = e.target;//获取绘制饼图的canvas元素
- var context = canvas.getContext('2d');//获取绘制饼图的canvas元素的图形上下文对象
- var obj = canvas.__object__;//获取饼图对象
- var segment = obj.getSegment(e);//获取被点击的饼块
-
- if (segment) //如果存在被点击的饼块
- {
- context.fillStyle = 'rgba(255,255,255,0.5)';//指定白色半透明颜色为填充色
- context.beginPath();//开始创建路径
-
- //将角度转换为半径
- segment[3] /= 57.29;
- segment[4] /= 57.29;
-
- context.moveTo(segment[0], segment[1]);//将绘制起点移动到被点击的饼块处
- //在被点击的饼块上再绘制相同尺寸的饼块
- context.arc(segment[0], segment[1], segment[2], segment[3], segment[4], 0);
- context.stroke();//绘制饼块边框
- context.fill();//填充饼块
-
- e.stopPropagation();//阻止事件传播
- }
- }
- }
- //指定页面被点击时的函数
- window.onclick = function (e)
- {
- RGraph.Redraw();//重绘饼图
- }
- </script>
- </head>
- <body onload="window_onload()">
- <h1>使用RGraph插件制作饼图</h1>
- <canvas id="myCanvas" width="700" height="400">
- [您的浏览器不支持canvas元素]
- </canvas>
- </body>
- </html>
|
京ICP备14042305号
