zoukankan      html  css  js  c++  java
  • 使用 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)

  • 相关阅读:
    149. Max Points on a Line(js)
    148. Sort List(js)
    147. Insertion Sort List(js)
    146. LRU Cache(js)
    145. Binary Tree Postorder Traversal(js)
    144. Binary Tree Preorder Traversal(js)
    143. Reorder List(js)
    142. Linked List Cycle II(js)
    141. Linked List Cycle(js)
    140. Word Break II(js)
  • 原文地址:https://www.cnblogs.com/studyhs/p/2611605.html
Copyright © 2011-2022 走看看