使用 RGraph(HTML5) 绘制折线图（三）

贴出代码

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 + "<br/>" + jsonResult[i].DataList[j].DataTime.format("yyyy-MM-dd") + "<br/>" + 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") + "<br/>";··// 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 = "&nbsp&nbsp&nbsp&nbsp第" + ranking + "名" + ": " + datas[i].DataTitle + ", " + datas[i].DataList[dateIndex].Value + "&nbsp&nbsp&nbsp&nbsp" + "</br>";
            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 = "<h1>" + finalInfos + "</h1>";

    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 像素坐标(亦即相对于当前窗口)。

可参见http://blog.sina.com.cn/s/blog_8ccf0b170100yjm7.html

还有IE的marginLeft是从div的左上角开始算的，而FireFox是从中上方开始算的，所以应该分类讨论

 

下一篇，扫尾