zoukankan      html  css  js  c++  java
  • 使用 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是从中上方开始算的,所以应该分类讨论

    下一篇,扫尾

  • 相关阅读:
    二分图 洛谷P2055 [ZJOI2009]假期的宿舍
    并查集 洛谷P1640 [SCOI2010]连续攻击游戏
    贪心 洛谷P2870 Best Cow Line, Gold
    贪心 NOIP2013 积木大赛
    快速幂 NOIP2013 转圈游戏
    倍增LCA NOIP2013 货车运输
    树形DP 洛谷P2014 选课
    KMP UVA1328 Period
    动态规划入门 BZOJ 1270 雷涛的小猫
    KMP POJ 2752Seek the Name, Seek the Fame
  • 原文地址:https://www.cnblogs.com/studyhs/p/2614721.html
Copyright © 2011-2022 走看看