贴出代码
function showRGraph(canvasId, jsonResult, colorIndexs) { // 根据选中的颜色绘制折线图 if (jsonResult == null) return; RGraph.Clear(document.getElementById(canvasId)); // 由于RGraph采用动态重绘技术，所以先清理掉前一次的遗留 // 获取jsonResult真正长度 length = 0; for (i = 0; i < jsonResult.length; i++) { if (jsonResult[i] != null) { length++; } } jsonResult.length = length; // 获取颜色 var selectedColors = new Array(); var colors = ['aqua', 'lime', 'silver', 'maroon', 'teal', 'blue', 'navy', 'fuchsia', 'olive', 'yellow', 'gray', 'purple', 'green', 'red']; if (colorIndexs == null) { for (i = 0; i < jsonResult.length; i++) { selectedColors.push(colors[i % colors.length]); } } else { selectedColors = new Array(); for (i = 0; i < jsonResult.length; i++) { selectedColors.push(colors[colorIndexs[i] % colors.length]); } } var allDatas = new Array(); var allLabels = new Array(); var allTooltips = new Array(); var allKeys = new Array(); for (i = 0; i < jsonResult.length; i++) { allKeys.push(jsonResult[i].DataTitle); var labels = new Array(); var datas = new Array(); var tooltips = new Array(); for (var j = 0; j < jsonResult[i].DataList.length; j++) { if (i == 0) { allLabels.push(jsonResult[i].DataList[j].DataTime.format("yyyy-MM-dd")); } datas.push(jsonResult[i].DataList[j].Value); tooltips.push(jsonResult[i].DataTitle + "" + jsonResult[i].DataList[j].DataTime.format("yyyy-MM-dd") + "" + jsonResult[i].DataList[j].Value); } allDatas.push(datas); allTooltips.push(tooltips); } if (!window["line_" + canvasId]) window["line_" + canvasId] = new RGraph.Line(canvasId, allDatas); var line1 = window["line_" + canvasId]; line1.Set('chart.key', allKeys); line1.Set('chart.key.position', 'gutter'); line1.Set('chart.key.position.gutter.boxed', false); line1.Set('chart.colors', selectedColors); line1.Set('chart.labels', allLabels); line1.Set('chart.events.click', myClick); line1.Set('chart.tooltips', allTooltips); line1.Set('chart.linewidth', 2); line1.Set('chart.key.position', 'gutter'); line1.Set('chart.key.position.gutter.boxed', false); line1.Set('chart.tickmarks', 'circle'); line1.Set('chart.shadow', true); line1.Set('chart.shadow.offsetx', 1); line1.Set('chart.shadow.offsety', 1); line1.Set('chart.shadow.blur', 3); line1.Set('chart.hmargin', 15); line1.Set('chart.gutter.bottom', 45); line1.Set('chart.background.grid.vlines', false); line1.Set('chart.title.vpos', 0.65); line1.Set('chart.title.hpos', 0.2); line1.Set('chart.text.angle', 30); line1.Set('chart.text.size', 8); line1.original_data = allDatas; // 同上文注释，防止动态重绘之前数据的折线图 line1.Draw();} function myClick(e, line) { // 若触发，动态生成一div,显示所有人成绩以及排名 // 每次触发，需先将上次生成的div清理
var bb = document.getElementById("divRGraphDetailTable"); if (bb != null) { bb.parentNode.removeChild(bb); } var info; var finalInfos = ""; var datas = eval(line[0].id + "JsonObj"); var infos = new Array(datas.length); var dataIndex = line.dataset; var dateIndex = line.index_adjusted; var thisValue = datas[dataIndex].DataList[dateIndex].Value; var ranking = 1; var realCount = 1; infos[0] = datas[dataIndex].DataList[dateIndex].DataTime.format("yyyy-MM-dd") + "";··// DataTime具体见最后一篇 // 排名 for (var i = 0; i < datas.length; i++) { ranking = 1; thisValue = datas[i].DataList[dateIndex].Value; if (thisValue != null) { realCount++; for (var j = 0; j < datas.length; j++) { if (datas[j].DataList[dateIndex].Value > thisValue) { ranking++; } } info = "  第" + ranking + "名" + ": " + datas[i].DataTitle + ", " + datas[i].DataList[dateIndex].Value + " " + ""; infos[ranking] = info; } } for (var i = 0; i < realCount; i++) { finalInfos += infos[i]; } var div = document.createElement('div'); div.id = "divRGraphDetailTable"; div.style.fontSize = "6px"; div.style.background = "aqua"; div.style.border = "solid 1px black"; div.style.zIndex = 10; div.innerHTML = "" + finalInfos + "
"; var left = e.clientX; var top = e.offsetY; var parentItem = document.getElementById(e.target.id).parentElement; div.style.position = "absolute"; div.style.marginLeft = (left) + "px"; div.style.marginTop = (top - parentItem.clientHeight * 20 / 21) + "px"; parentItem.appendChild(div); // 以下添加一个关闭div的按钮 var close = document.createElement('close'); close.id = "test1"; close.style.fontSize = "16px"; close.innerHTML = "×"; close.style.zIndex = 11; close.style.position = "absolute"; if (navigator.userAgent.indexOf("MSIE") > 0) { close.style.marginLeft = (0 + div.clientWidth - 20) + "px"; } else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { close.style.marginLeft = (0 + div.clientWidth / 2 - 20) + "px"; } else { close.style.marginLeft = (0 + div.clientWidth - 20) + "px"; } close.style.marginTop = (0 - div.clientHeight) + "px"; div.appendChild(close); close.onmousemove = function () { close.style.cursor = "pointer"; } close.onmousedown = function () { var bc = document.getElementById("divRGraphDetailTable"); if (bc != null) { bc.parentNode.removeChild(bc); } }} 值得注意的有clientX, offsetX区别，最重要的是自己尝试
概念（来源于网络）：
clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。可参见
还有IE的marginLeft是从div的左上角开始算的，而FireFox是从中上方开始算的，所以应该分类讨论
下一篇，扫尾