HTML5 RGraph 第十六章统计图拖拽和工具条提示信息

2013-11-12 00:09| 发布者: mydream| 查看: 1298| 评论: 0|原作者: mydream

摘要: HTML5 RGraph如何增强用户体验通过使用RGraph插件中的一些属性，可以增强用户体验，使用户可以对所绘制的统计图进行简单操作。通过拖曳来缩放统计图的尺寸通过将统计图的公共属性chart.resizable的属性值 ...

HTML5 RGraph  如何增强用户体验
通过使用RGraph插件中的一些属性，可以增强用户体验，使用户可以对所绘制的统计图进行简单操作。

通过拖曳来缩放统计图的尺寸
通过将统计图的公共属性chart.resizable的属性值设为true，使用户通过拖曳操作来自定义统计图的尺寸。使用该属性的步骤有两步：

1)引用RGraph.common.resizing.js脚本文件，代码如下所示。
<script src= "RGraph.common.resizing. js"></script>
2)在统计图的属性设置中将统计图的chart.resizable的属性值设为true，代码如下所示。
myGraph . Set ( 'chart.resizable ' , true)  ;
完成了这两步操作后，统计图右下角将会出现一个十字拖放符号，用户可以通过拖曳该符号来放大或缩小统计图的尺寸。

制作工具条提示信息
1．概述
利用RGraph插件可以为统计图制作各种丰富多彩的工具条提示信息。从本质上来说，RGraph插件通过一个div元素来显示工具条提示信息。因此，可以使用HTML语言来制作工具条提示信息，以显示图像（使用img元素）和视频（使用video元素）等信息。
    2．工具条提示信息的指定方法
使用chart.tooltips属性为统计图添加工具条提示信息。具体步骤分为如下两步：

1)引用RGraph.common．tooltips.js脚本文件
2)使用chart.tooltips属性定义工具条提示信息从本质上来说，必须利用字符串来定义工具条提示信息中的每一项（可以是HTML语言），也可以通过函数来进行定义，但是这些函数必须返囤字符串。可以使用函数来定义整个工具条提示信息，也可以使用函数来定义工具条提示信息中的某一项。在定义工具条提示信息中的每一项时，可以同时使用字符串与函数。

3．在工具条提示信息中使用统计图
使用RGraph插件可以在工具条提示信息中显示统计图。通过使用特定事件可以很容易实现这一操作，只需在ontooltip事件中使用创建统计图的函数即可。可以在该函数内书写工具条提示信息中所显示的统计图的HTML代码。具体来说，分为以下几个步骤：

1)为工具条提示信息书写HTML代码（在代码中使用canvas元素）
2)在RGraph的ontooltip事件中书写显示工其条信息提示时调用的函数。
3)在该函数中书写工具条提示信息中显示的统计图代码。

使用RGraph.Registry.Get(’chart．tooltip')方法可以获得工具条提示信息所使用的div元素，使用RGraph.Registry.Get(’chart.tooltip')._indcx一属性可以获得每一个工具条提示信息项的编号。接下来看一个示例程序，该示例程序使用柱状图来显示常州第一百货公司2010年每个月彩电的销售情况，在页面中单击柱状图中每根柱子将弹出工具条提示信息，在工具条提示信息中使用饼图来显示该月中各种彩电的销售数量的分布情况。
单击每一个工具条时出现提示信息：

HTML5 GRaph制作工具条提示信息

完整代码如下：

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>在工具条提示信息中显示饼图</title>
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.tooltips.js" ></script>
<script src="RGraph.bar.js"></script>
<script src="RGraph.pie.js"></script>
<script>
function window_onload()
{
//绘制柱状图，指定数据
myGraph = new RGraph.Bar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,
2500,2700,1400,2600]);
//指定统计图标题
myGraph.Set('chart.title','2010年常州第一百货公司彩电销售图');
//指定X轴标题
myGraph.Set('chart.title.xaxis','销售月份');
//指定Y轴标题
myGraph.Set('chart.title.yaxis','销售台数');
//指定X轴的坐标轴文字
myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']);
//指定Y轴的坐标轴文字
myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
//指定在坐标轴顶部绘制说明销售数量的文字
myGraph.Set('chart.labels.above', true);
//指定网格自动与坐标轴单位对齐
myGraph.Set('chart.background.grid.autofit', true);
myGraph.Set('chart.background.grid.autofit.align', true);
//指定标签文字所使用的空间尺寸
myGraph.Set('chart.gutter',65);
//指定工具条提示信息
myGraph.Set('chart.tooltips', function (idx) {return '<canvas id="__tooltip_canvas__" width="400" height="250">[您的浏览器不支持canvas元素]</canvas>';});
myGraph.Set('chart.tooltips.effect','snap');
//绘制柱状图
myGraph.Draw();
//添加显示工具条提示信息时的事件处理
RGraph.AddCustomEventListener(myGraph, 'ontooltip', CreateTooltipGraph);
}
//绘制饼图
function CreateTooltipGraph(obj)
{
//显示月份时使用的数组
var months=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
//各彩电12个月的销售数量，仅供示例用
var datas = [
[1200,1300,1400,1500,3000,1900],
[790,990,670,760,770,1100],
[1200,560,700,990,670,1100],
[780,1900,950,700,760,780],
[860,380,590,780,930,780],
[880,1100,780,680,960,1300],
[530,780,940,570,790,1200],
[1300,600,630,710,720,1100],
[920,850,750,820,480,1100],
[780,390,600,500,680,1200],
[760,1000,730,1000,630,880],
[480,1000,1200,1000,650,440]
];
//各彩电占总销售数量的百分比
var labels=[
['长虹（12%）', '康佳（13%）', '创维（14%）', '三星（15%）','夏普（29%）','索尼（17%）'],
['长虹（16%）', '康佳（19%）', '创维（13%）', '三星（15%）','夏普（15%）','索尼（22%）'],
['长虹（23%）', '康佳（11%）', '创维（13%）', '三星（19%）','夏普（13%）','索尼（22%）'],
['长虹（13%）', '康佳（32%）', '创维（16%）', '三星（12%）','夏普（13%）','索尼（14%）'],
['长虹（20%）', '康佳（9%）', '创维（14%）', '三星（18%）','夏普（21%）','索尼（17%）'],
['长虹（15%）', '康佳（19%）', '创维（14%）', '三星（12%）','夏普（17%）','索尼（23%）'],
['长虹（11%）', '康佳（16%）', '创维（20%）', '三星（12%）','夏普（16%）','索尼（25%）'],
['长虹（26%）', '康佳（12%）', '创维（12%）', '三星（14%）','夏普（14%）','索尼（22%）'],
['长虹（19%）', '康佳（17%）', '创维（15%）', '三星（17%）','夏普（10%）','索尼（22%）'],
['长虹（19%）', '康佳（9%）', '创维（14%）', '三星（12%）','夏普（16%）','索尼（30%）'],
['长虹（15%）', '康佳（20%）', '创维（15%）', '三星（20%）','夏普（13%）','索尼（17%）'],
['长虹（10%）', '康佳（21%）', '创维（25%）', '三星（21%）','夏普（14%）','索尼（9%）']
]
//获取触发事件的工具条提示信息项的编号
var idx = RGraph.Registry.Get('chart.tooltip').__index__;
//绘制饼图，指定数据
var pie=new RGraph.Pie('__tooltip_canvas__',datas[idx]);
//绘制饼图标题
pie.Set('chart.title', '2010年'+months[idx]+'常州第一百货公司彩电销售分布图');
//指定标签文字
pie.Set('chart.labels',labels[idx]);
//指定饼块分隔线宽
pie.Set('chart.linewidth', 5);
//指定饼块分隔线颜色
pie.Set('chart.strokestyle','white');
//指定标签文字所使用的空间尺寸
pie.Set('chart.gutter',65);
//绘制饼图
pie.Draw();
}
</script>
</head>
<body onload="window_onload()">
<h1>在工具条提示信息中显示饼图</h1>
<canvas id="myCanvas" width="700" height="400">
[您的浏览器不支持canvas元素]
</canvas>
</body>
</html>