使用d3.js画簇状条形图

最新推荐文章于 2022-08-21 23:21:03 发布

专业前端小白

最新推荐文章于 2022-08-21 23:21:03 发布

阅读量881

点赞数 1

分类专栏： d3.js 文章标签： d3.js簇状条形图

本文链接：https://blog.csdn.net/qq_41756580/article/details/88871213

版权

d3.js 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

效果图：

直接上代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>簇状条形图</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      html,body{
        background-color: #f2f3f5;
      }
      .month_svg{
        height: 400px;
      }
      .month_svg .axis path, .month_svg .axis line {
       stroke: black;
       fill: none;
      }
    </style>
  </head>
  <body>
    
    <div class="month_svg">
      
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript">
      // var dataset = {
      //   x: ["签到","未签到","签退","未签退","迟到","早退","其他"],
      //   y: [9, 30, 90, 70, 50, 20, 40]
      // };

      var dataset = [
        {
          employee_name: "张三",
          employee_data: [11,20,30], 
        },
        {
          employee_name: "李四",
          employee_data: [6,40,50], 
        },
        {
          employee_name: "王五",
          employee_data: [10,70,30], 
        },
        {
          employee_name: "马六",
          employee_data: [9,20,80], 
        },
      ];

      lineHeightSvg(dataset);

      function lineHeightSvg(dataset){  //直方图
        var padding = { top: 50, right: 40, bottom: 30, left: 60 };
        var spanData = ["签到","值班","无班次"]; //标注数组
        var rectHeight = 100; //距离 = 3个矩形宽度加上间距
        var width = $(".month_svg").width();
        var height = dataset.length*rectHeight + padding.top + padding.bottom;
        //console.log(height);
        var svg = d3.select(".month_svg").append("svg")
              .attr("width",width)
              .attr("height",height);
          // 创建一个分组用来组合要画的图表元素
        
        var main = svg.append('g')  // 给这个分组加上main类
              .attr('class','main')  // 设置该分组的transform属性
              .attr('transform', "translate(" + padding.left + ',' + padding.top + ')');
        
        var getColor = d3.scale.category10(); //定义颜色比例尺
        
        svg.selectAll('.spanRect')
            .data(spanData)
            .enter()
            .append('rect')
            .attr('class', 'spanRect')
            .attr('x', function(d,i){
              return i*(width/3) + padding.left;
            })
            .attr('y', 10)
            .attr('width',40)
            .attr('height', 30)
            .attr('fill', function(d, i) {
             return getColor(i);
            });

        svg.selectAll('.spanText')
            .data(spanData)
            .enter()
            .append('text')
            .attr('class', 'spanText')
            .attr("x",function(d,i){
              return i*(width/3) + padding.left + 45;
            })
            .attr("y",10)
            .attr("text-anchor","left")
            .attr("dx",0)
            .attr("dy",20)
            .text(function(d,i){
              return d;
            });

        var dataNum = []; //得到数字数组
        var dataName = []; //得到姓名数组
        $.each(dataset,function(i,val){
          dataNum = dataNum.concat(val.employee_data);
          dataName = dataName.concat(val.employee_name);
        });
        // 定义x轴的比例尺(线性比例尺)
        var xScale = d3.scale.linear()
          .domain([0, d3.max(dataNum)]) //domain（）定义域
          .range([ 0,width - padding.left - padding.right]); //range（）值域

        // 定义y轴的比例尺(序数比例尺)
        var yScale = d3.scale.ordinal()
          .domain(dataName)
          .rangeRoundBands([0, height - padding.top - padding.bottom]);
        // 定义x轴和y轴
        var xAxis = d3.svg.axis()
          .scale(xScale)
          .orient('bottom');

        var yAxis = d3.svg.axis()
          .scale(yScale)
          .orient('left');
          
        // 矩形之间的间距
        var rectMargin = 10;
        //创建签到矩形条
        main.selectAll('.qiandao')
            .data(dataset)
            .enter()
            .append('rect')
            .attr('class', 'qiandao')
            .attr('x', '0')
            .attr('y', function(d,i){
              return rectHeight*i + 5;
            })
            .attr('width','0')
            .attr('height', (rectHeight-rectMargin)/3)
            .attr('fill', function(d, i) {
             return getColor(0);
            })
            .transition()
            .duration(500) //持续时间毫秒
            .delay(function(d,i){  //延迟多少毫秒执行
              return 200*i;
            })
            .attr('width',  function(d,i){
              return xScale(d.employee_data[0]);
            });

        //创建值班矩形条
        main.selectAll('.zhiban')
            .data(dataset)
            .enter()
            .append('rect')
            .attr('class', 'zhiban')
            .attr('x', '0')
            .attr('y', function(d,i){
              return rectHeight*i + 5 + (rectHeight-rectMargin)/3;
            })
            .attr('width','0')
            .attr('height', (rectHeight-rectMargin)/3)
            .attr('fill', function(d, i) {
             return getColor(1);
            })
            .transition()
            .duration(500) //持续时间毫秒
            .delay(function(d,i){  //延迟多少毫秒执行
              return 200*i;
            })
            .attr('width',  function(d,i){
              return xScale(d.employee_data[1]);
            });

        //创建无班次矩形条
        main.selectAll('.noBanci')
            .data(dataset)
            .enter()
            .append('rect')
            .attr('class', 'noBanci')
            .attr('x', '0')
            .attr('y', function(d,i){
              return rectHeight*i + 5 + 2*(rectHeight-rectMargin)/3;
            })
            .attr('width','0')
            .attr('height', (rectHeight-rectMargin)/3)
            .attr('fill', function(d, i) {
             return getColor(2);
            })
            .transition()
            .duration(500) //持续时间毫秒
            .delay(function(d,i){  //延迟多少毫秒执行
              return 200*i;
            })
            .attr('width',  function(d,i){
              return xScale(d.employee_data[2]);
            });

        // 添加坐标轴元素
        main.append('g')
          .attr('class', 'axis')
          .attr('transform', 'translate(0,' + (height - padding.bottom - padding.top) + ')')
          .call(xAxis);

        main.append('g')
          .attr('class', 'axis')
          .call(yAxis);
          
        var danwei = d3.select(".month_svg svg")
            .append("text")
            .attr("x",width-padding.right)
            .attr("y",height-padding.bottom)
            .attr("text-anchor","left")
            .text("(次)");

        main.selectAll('.qiandaoNum') //给签到添加数字
            .data(dataset)
            .enter()
            .append('text')
            .attr('class','qiandaoNum')
            .attr('x', function(d,i){
              return xScale(d.employee_data[0]);
            })
            .attr('y', function(d,i){
              return rectHeight*i + 5;
            })
            .attr("dx",function(d){
              
            })
            .attr("dy",rectHeight/6+3)
            .text(function(d){
              return d.employee_data[0];
            });

        main.selectAll('.zhibanNum') //给值班添加数字
            .data(dataset)
            .enter()
            .append('text')
            .attr('class','zhibanNum')
            .attr('x', function(d,i){
              return xScale(d.employee_data[1]);
            })
            .attr('y', function(d,i){
              return rectHeight*i + 5;
            })
            .attr("dx",function(d){
              
            })
            .attr("dy",3*rectHeight/6)
            .text(function(d){
              return d.employee_data[1];
            });

        main.selectAll('.noBanciNum') //给无班次添加数字
            .data(dataset)
            .enter()
            .append('text')
            .attr('class','noBanciNum')
            .attr('x', function(d,i){
              return xScale(d.employee_data[2]);
            })
            .attr('y', function(d,i){
              return rectHeight*i + 5;
            })
            .attr("dx",function(d){
              
            })
            .attr("dy",5*rectHeight/6-3)
            .text(function(d){
              return d.employee_data[2];
            });
      }
        
    </script>
  </body>
</html>

专业前端小白

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
使用d3.js画簇状条形图

效果图：直接上代码：<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view...
复制链接

扫一扫