d3.js

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/d3.min.js"></script>
<title></title>
<style>
.axis path, .axis line {
    fill: gray;
}

.axis text {
    font-family: sans-serif;
    font-size: 0px;
}
</style>
</head>
<body>
    <%
        //图形概览 转json数据
        private JSONArray xmjysJson;
        private JSONArray kxxyjbgpfJson;
        private JSONArray xmydhcbsjJson;
        private JSONArray jsgcghxkJson;
        private JSONArray jsgcsgxkJson;
        xmjysJson = JSONArray.fromObject(xmjys);
        kxxyjbgpfJson = JSONArray.fromObject(kxxyjbgpf);
        xmydhcbsjJson = JSONArray.fromObject(xmydhcbsj);
        jsgcghxkJson = JSONArray.fromObject(jsgcghxk);
        jsgcsgxkJson = JSONArray.fromObject(jsgcsgxk);
    %>
    <svg width="780" height="450"></svg>
    <script>
        var padding = {
            top : 60,
            bottom : 110,
            left : 60,
            right : 60
        }
    
        var xmjys = eval('${xmjysJson}');
        var kxxyjbgpf = eval('${kxxyjbgpfJson}');
        var xmydhcbsj = eval('${xmydhcbsjJson}');
        var jsgcghxk = eval('${jsgcghxkJson}');
        var jsgcsgxk = eval('${jsgcsgxkJson}');
    
        var date = [];
        for (i = 0; i < xmjys.length; i++) {
            var a = {
                x : "项目建议书批复",
                y : i + 1,
                c : xmjys[i].docName,
                d : xmjys[i].extPrjDocId,
                e : xmjys[i].docStatus
            }
            date.push(a);
        }
        for (i = 0; i < kxxyjbgpf.length; i++) {
            var b = {
                x : "可行性研究报告批复",
                y : i + 1,
                c : kxxyjbgpf[i].docName,
                d : kxxyjbgpf[i].extPrjDocId,
                e : kxxyjbgpf[i].docStatus
            }
            date.push(b);
        }
        for (i = 0; i < xmydhcbsj.length; i++) {
            var c = {
                x : "项目用地和初步设计",
                y : i + 1,
                c : xmydhcbsj[i].docName,
                d : xmydhcbsj[i].extPrjDocId,
                e : xmydhcbsj[i].docStatus
            }
            date.push(c);
        }
        for (i = 0; i < jsgcghxk.length; i++) {
            var d = {
                x : "建设工程规划许可",
                y : i + 1,
                c : jsgcghxk[i].docName,
                d : jsgcghxk[i].extPrjDocId,
                e : jsgcghxk[i].docStatus
            }
            date.push(d);
        }
        for (i = 0; i < jsgcsgxk.length; i++) {
            var e = {
                x : "建设工程施工许可",
                y : i + 1,
                c : jsgcsgxk[i].docName,
                d : jsgcsgxk[i].extPrjDocId,
                e : jsgcsgxk[i].docStatus
            }
            date.push(e);
        }
    
        var dataset = {
            x : [ "项目建议书批复", "可行性研究报告批复", "项目用地和初步设计", "建设工程规划许可", "建设工程施工许可" ],
            y : [ xmjys.length + 1, kxxyjbgpf.length + 1, xmydhcbsj.length + 1, jsgcghxk.length + 1, jsgcsgxk.length + 1 ]
        };
    
        var svg = d3.select("svg");
        var width = svg.attr("width");
        var height = svg.attr("height");
        var main = svg.append('g').attr('transform', "translate(" + padding.top + ',' + padding.left + ')');
    
        //绘制比列尺
        //线性比列尺
        var xscale = d3.scale.ordinal().domain(dataset.x)
            .rangeRoundBands([ 0, width - padding.left - padding.right ], 0, 0);
        //序数比列尺
        var yscale = d3.scale.linear()
            .domain([ 0, d3.max(dataset.y) ])
            .range([ height - padding.top - padding.bottom, 0 ]);
        //分别在x方向和y方向绘制坐标轴
        var xAxis = d3.svg.axis().scale(xscale).orient('bottom');
        var yAxis = d3.svg.axis().scale(yscale).orient('left');
    
        //设置x轴 字体旋转显示
        main.append('g').attr('class', 'axis').attr('transform', 'translate(0,' + (height - padding.top - padding.bottom) + ')')
            .call(xAxis).selectAll("text")
            .style("font-size", "14px")
            .style("text-anchor", "start")
            .attr("transform", "rotate(45 -10 10)");
        main.append('g').attr('class', 'axis').call(yAxis);
    
        //矩形之间的间隙
        var rectMargin = 60;
        // 添加矩形
        main.selectAll('.bar')
            .data(dataset.y)
            .enter().append("g")
            .append('rect')
            .attr('class', 'bar')
            .attr('x', function(d, i) {
                return xscale(dataset.x[i]) + rectMargin;
            })
            .attr('y', function(d, i) {
                return yscale(d);
            })
            .attr('width', xscale.rangeBand() - 2 * rectMargin)
            .attr('height', function(d, i) {
                return height - padding.top - padding.bottom - yscale(d);
            })
            .attr("fill", "gray");
    
        //文字提示
        var tooltip = svg.append('text')
            .style('visibility', 'hidden') // 是否可见（一开始设置为隐藏）
            .style('font-size', '14px')
            .style('font-weight', 'bold')
            .text('');
    
        // 添加点
        main.selectAll('circle')
            .data(date)
            .enter().append("g")
            .append('ellipse')
            .attr("cx", function(d) {
                return xscale(d.x) + 65;
            })
            .attr("cy", function(d) {
                return yscale(d.y);
            })
            .attr("rx", 30)
            .attr("ry", 15)
            .attr("fill", function(d, i) {
                if (d.e == true) {
                    return "red";
                }
                return "gray";
            })
            .on("mouseover", function(d, i) {
                return tooltip.style('visibility', 'visible').text(d.c).attr("x", xscale(d.x) + 100).attr("y", yscale(d.y) + 40);
            })
            .on("mouseout", function(d, i) {
                return tooltip.style('visibility', 'hidden').text('');
            })
            .on("click", function(d, i) {
                window.location.href = "toEditDocKeyInfo.action?editType=update&&extPrjDocId=" + d.d;
            });
    </script>
</body>
</html>
鼠标悬停：/ 点击点触发点击事件
猜你喜欢
