Web : 使用RGraph(HTML5)绘制折线图(二)

上文提到了showCheckBox(canvasId, jsonResult)

function showCheckBox(canvasId, jsonResult) {
    j = 4;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// j为在div中插入的位置,div中依次为<span>,<br/>,<br/>,新增<br/>var parentItem = document.getElementById(canvasId).parentNode;　// 获取到div
    var spaceDiv = document.createElement("div");
    spaceDiv.innerHTML = "<br/>";
    parentItem.insertBefore(spaceDiv,parentItem.childNodes[3]);　　　 // 新增<br/>到div
    for (i = 0; i < jsonResult.length; i++) {
        name = "cb" + (i + 1);
        cb = document.createElement("input");
        cb.type = "checkbox";
        cb.id = name;
        cb.checked = true;
        cb.onclick = fReShowRGraph;　　　　　　　　　　　　　　　　　　　　// 添加onclick事件
        cb.value = 1;
        name = "lb" + (i + 1);
        lb = document.createElement("label");
        lb.id = name;
        lb.innerHTML = jsonResult[i].DataTitle;
        parentItem.insertBefore(cb, parentItem.childNodes[j++]);　　　// 插入checkbox
        parentItem.insertBefore(lb, parentItem.childNodes[j++]);　　　// 插入label
    }

    showRGraph(canvasId, jsonResult, null);
}

function fReShowRGraph() {
    id = arguments[0].target.id;　　　　　　　　　　　　　　　　　　　　　　// 获取checkbox id
    var cb = document.getElementById(id);　　　　　　　　　　　　　　　　　
　　// 是否勾选
    if (cb.value == 1) {
        cb.checked = false;
        cb.value = 0;
    }
    else if (cb.value == 0) {
        cb.checked = true;
        cb.value = 1;
    }
    var div = arguments[0].target.parentElement;　　　　　　　　　　　　// 由于div id依次为div1,div2...line id也为line1,line2...故通过div的index值找到是哪个line
    index = div.id.substring(3);
    var datas = eval("line" + index + "JsonObj");　　　　　　　　　　　　// eval(obj)
    var sourceDatas = new Array();　　　　　　　　　　　　　　　　　　　　　// 若无此行，每次datas改变会影响源数据，导致只能越变越少，而不是从头再来
    var colorIndexs = new Array();　　　　　　　　　　　　　　　　　　　　　// 颜色数组，保存线条颜色
    for (var i = 0; i < datas.length; i++) {
        name = "cb" + (i + 1);
        try {
            if (document.getElementById(name).value == 1) {
                sourceDatas.push(datas[i]);
                colorIndexs.push(i);
            }
        }
        catch (e) {

        }
    }
    lineId = "line" + index;
    line = document.getElementById(lineId);

    showRGraph(lineId, sourceDatas, colorIndexs);
}

 

显然其中showGRaph(canvasId, jsonResult, colorIndexs)是关键，上述第一段代码向每个div插入checkBox而已，值得注意的是插入位置的选取，以及value值决定checkBox是否勾选（汗，年少无知），另外给checkBox设置了onclick事件，具体的即为第二段代码

第二段代码中eval()函数是一个强大的功能（又一次年少无知），详细介绍可参见http://www.w3school.com.cn/js/jsref_eval.asp, 上述第二段代码中eval使用基于反射机制，获取到一个json对象

你懂得，下次详细介绍showRGraph(canvasId, jsonResult, colorIndexs)