Cold_Api/static/panel/lib/modernizr/js/drawGrid.js

var stepX = 77 / 14;
function point(x, y) {
    x: 0;
    y: 0;
}
/* DRAW GRID */
function drawGrid(graph) {

    $(graph).html("<defs>\n" +
        "          <clipPath id=\"clip\" x=\"0\" y=\"0\" width=\"80\" height=\"40\" >\n" +
        "            <rect id=\"clip-rect\" x=\"-80\" y=\"0\" width=\"77\" height=\"38.7\"/>\n" +
        "          </clipPath>\n" +
        "\n" +
        "          <linearGradient id=\"gradient-1\">\n" +
        "            <stop offset=\"0\" stop-color=\"#00d5bd\" />\n" +
        "            <stop offset=\"100\" stop-color=\"#24c1ed\" />\n" +
        "          </linearGradient>\n" +
        "\n" +
        "          <linearGradient id=\"gradient-2\">\n" +
        "            <stop offset=\"0\" stop-color=\"#954ce9\" />\n" +
        "            <stop offset=\"0.3\" stop-color=\"#954ce9\" />\n" +
        "            <stop offset=\"0.6\" stop-color=\"#24c1ed\" />\n" +
        "            <stop offset=\"1\" stop-color=\"#24c1ed\" />\n" +
        "          </linearGradient>\n" +
        "\n" +
        "          <linearGradient id=\"gradient-3\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">>\n" +
        "            <stop offset=\"0\" stop-color=\"rgba(0, 213, 189, 1)\" stop-opacity=\"0.07\"/>\n" +
        "            <stop offset=\"0.5\" stop-color=\"rgba(0, 213, 189, 1)\" stop-opacity=\"0.13\"/>\n" +
        "            <stop offset=\"1\" stop-color=\"rgba(0, 213, 189, 1)\" stop-opacity=\"0\"/>\n" +
        "          </linearGradient>\n" +
        "\n" +
        "          <linearGradient id=\"gradient-4\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">>\n" +
        "            <stop offset=\"0\" stop-color=\"rgba(149, 76, 233, 1)\" stop-opacity=\"0.07\"/>\n" +
        "            <stop offset=\"0.5\" stop-color=\"rgba(149, 76, 233, 1)\" stop-opacity=\"0.13\"/>\n" +
        "            <stop offset=\"1\" stop-color=\"rgba(149, 76, 233, 1)\" stop-opacity=\"0\"/>\n" +
        "          </linearGradient>\n" +
        "\n" +
        "        </defs>")

    var graph = Snap(graph);
    var g = graph.g();
    g.attr('id', 'grid');
    for (i = 0; i <= stepX + 2; i++) {
        var horizontalLine = graph.path(
            "M" + 0 + "," + stepX * i + " " +
            "L" + 77 + "," + stepX * i);
        horizontalLine.attr('class', 'horizontal');
        g.add(horizontalLine);
    };
    for (i = 0; i <= 14; i++) {
        var horizontalLine = graph.path(
            "M" + stepX * i + "," + 38.7 + " " +
            "L" + stepX * i + "," + 0)
        horizontalLine.attr('class', 'vertical');
        g.add(horizontalLine);
    };

}

function drawLineGraph(graph, points, id,max_v ,min_v ) {


    var graph = Snap(graph);
    //
    // graph.g().remove()
    /*END DRAW GRID*/

    /* PARSE POINTS */
    var myPoints = [];
    var shadowPoints = [];

    function parseData(points) {

        points_max = Math.max.apply(Math,points)
        points_min = Math.min.apply(Math,points)
        if(max_v != 0){
            points_max = max_v
            points_min = min_v
        }
        points_zong = points_max - points_min
        // if(points_zong >)
        // console.log("points_max:",points_max,"points_min:",points_min,"points_zong:",points_zong)
        // console.log("points:",points)

        for (i = 0; i < points.length; i++) {



            var p = new point();
            points_v = points[i] - points_min
            if(points_min < 0){
                points_v = points[i]+Math.abs(points_min);
            }
            var pv = (points_v) / points_zong * 100 ;  // 放大倍
            pv = 100 - pv;
            // console.log( points_v , points_zong ,"pv:",pv)
            p.x = 77 / points.length * i + 2;
            p.y = 3.3 + pv / 3;
            // if (p.x > 78) {
            //     p.x = 78;
            // }
            myPoints.push(p);
        }
    }

    var segments = [];

    function createSegments(p_array) {
        for (i = 0; i < p_array.length; i++) {
            var seg = "L" + p_array[i].x + "," + p_array[i].y;
            if (i === 0) {
                seg = "M" + p_array[i].x + "," + p_array[i].y;
            }
            segments.push(seg);
        }
    }

    function joinLine(segments_array, id) {
        var line = segments_array.join(" ");
        var line = graph.path(line);
        line.attr('id', 'graph-' + id);


        // var lineLength = line.getTotalLength();
        // line.attr({
        //     'stroke-dasharray': lineLength,
        //         'stroke-dashoffset': lineLength
        // });
    }


    function showValues() {
        var val1 = $(graph).find('.h-value');
        var val2 = $(graph).find('.percentage-value');
        val1.addClass('visible');
        val2.addClass('visible');
    }

    function drawPolygon(segments, id) {
        var lastel = segments[segments.length - 1];
        var polySeg = segments.slice();
        polySeg.push([78, 38.4], [1, 38.4]);
        var polyLine = polySeg.join(' ').toString();
        var replacedString = polyLine.replace(/L/g, '').replace(/M/g, "");

        var poly = graph.polygon(replacedString);
        var clip = graph.rect(-80, 0, 80, 40);
        poly.attr({
            'id': 'poly-' + id,
            /*'clipPath':'url(#clip)'*/
                'clipPath': clip
        });
        clip.animate({
            transform: 't80,0'
        }, 1300, mina.linear);
    }

      parseData(points);
      createSegments(myPoints);
      // console.log("segments:",segments)
      joinLine(segments,id);
 
      drawPolygon(segments, id);  // 绘画 下面阴影
    

    /*$('#poly-'+id).attr('class','show');*/

    /* function drawPolygon(segments,id){
      var polySeg = segments;
      polySeg.push([80,40],[0,40]);
      var polyLine = segments.join(' ').toString();
      var replacedString = polyLine.replace(/L/g,'').replace(/M/g,"");
      var poly = graph.polygon(replacedString);
      poly.attr('id','poly-'+id)
    }
    drawPolygon(segments,id);*/
}