Web:Rgraph(HTML 5)を使用して折れ線図を描く(3)

コードの貼り付け

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の違いがあり、最も重要なのは自分で試してみることです.
コンセプト(ネットワークに由来):
クライアントXは、現在のウィンドウに対するマウスポインタの位置のx座標を設定または取得し、顧客領域にはウィンドウ自体のコントロールとスクロールバーが含まれていません.クライアントYは、現在のウィンドウに対するマウスポインタの位置のy座標を設定または取得し、顧客領域にはウィンドウ自体のコントロールとスクロールバーが含まれていない.offsetXは、トリガイベントのオブジェクトに対するマウスポインタの位置のx座標を設定または取得します.offsettYは、トリガイベントのオブジェクトに対するマウスポインタの位置のy座標を設定または取得します.screenXは、ユーザ画面に対するマウスポインタの位置を取得するx座標を設定または取得する.screenYは、ユーザ画面に対するマウスポインタの位置のy座標を設定または取得します.x親ドキュメントに対するマウスポインタの位置のxピクセル座標(すなわち、現在のウィンドウに対する)を設定または取得します.y親ドキュメントに対するマウスポインタの位置のyピクセル座標(すなわち、現在のウィンドウに対する)を設定または取得します.
http://blog.sina.com.cn/s/blog_8ccf0b170100yjm7.html参照
またIEのmarginLeftはdivの左上から計算され、FireFoxは中上から計算されるので、分類して検討すべきです
 
次は、後編