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)