jQuery plugin to implement dashboard

The jquery plug-in implements the dashboard for your reference. The specific contents are as follows

I made a simple dashboard, which is a common type of meter. It is not difficult to implement, but it requires a little calculation of the position.

Achieve results

Code section

*{
 margin: 0;
 padding: 0;
}
.rel{
 display: flex;
 justify-content:center;
 align-items:center;
 position: relative;
}
.bp{
 border-radius:50% ;
 border: 1px solid lightgray;
 position:relative;
 display: flex;
 justify-content: center;
 align-items: center;
 transform: rotate(-45deg);
}
.kd{
 position:absolute;
 width: 100%;
 font-size: 12px;
}
.point{
 background-color:lightgray;
 height: 100px;
 width: 20px;
 border-radius:100%;
 transform: rotate(90deg);
 transform-origin:10px 0px;
 z-index: 9;
 position: absolute;
 transition: all 0.5s;
}
.kb{
 position: absolute;
 bottom: 20px;
 font-size: 24px;
 color: gray;
 transition: all 0.5s;
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Make a dashboard</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/zgybp.js"></script>
  <link href="css/zgybp.css" rel="stylesheet" type="text/css" />
  <style>
   #div{
    border: 1px solid lightgray;
    width: 90%;
    height: 400px;
    margin: 20px auto;
   }
  </style>
 </head>
 <body>
  <div id="div"></div>
 </body>
</html>
<script>
 var temp = zgybp("div");
 setInterval(function(){
  var f = Math.floor(Math.random()*101);
  temp.load(f);
 },700)
</script>

var zgybp = function(id){
 var $id = $("#"+id);
 $id.addClass("rel");
 var a = $id.width()>$id.height()?$id.height():$id.width();
 $bp = $("<div class='bp'></div>");
 $bp.appendTo($id);
 $bp.css({
  "width":a,
  "height":a
 })
 //Draw the scale, only draw 3/4 270/100=2.7, each scale is 2.7
 for(var i =100;i>=0;i--){
  $kd = $("<div class='kd'><span class='txt'>-</span></div>");
  if(i%5==0){
   $kd.find('.txt').text(i)
  }
  $kd.appendTo($bp);
  $kd.css("transform","rotate("+(i*2.7)+"deg)");
 }
 $point = $("<div class='point'></div>")
 $point.appendTo($bp)
 $point.css({
  "left":a/2,
  "top":a/2
 })
 $kb = $("<div class='kb'>0</div>");
 $kb.appendTo($id)
 //Then turn the dial 1/8 of the angle, it's almost there return{
  $id:$id,
  $bp:$bp,
  $point:$point,
  $kb:$kb,
  load:function(f){
   var that = this;
   f = f<0?0:f>100?100:f;
   var temp = parseInt(f)*2.7;
   that.$point.css({
    "transform":"rotate("+(90+temp)+"deg)"
   })
   that.draw(f);
  },
  draw:function(f){
   var that =this;
   that.$kb.text(f);
  }
 }
}

Implementation ideas

Well, when I saw the meter on the car, I thought of implementing this dashboard.
This is divided into three steps. First, the dial is drawn. Of course, only 3/4 is drawn. Then the pointer is drawn and positioned correctly. Finally, the pointer is rotated to the corresponding position according to the input parameters.
I have chosen the simplest methods to implement them all. For example, I want to draw text on the dial, but it is too crowded so I have to draw five in the middle. Then for the pointer, I directly draw the deformed div. Here I use the flex of the parent container to center it. Therefore, there is a difficult part to explain, which is to move the pointer from the center point to the bottom or other positions deviating from the center point. If you want the pointer to be aligned with the correct scale, then there is an extra conversion step when calculating the deflection distance. I remember there was a function here, but I don’t remember it, so I didn’t move the pointer down for the sake of beauty.
Here I still take note of the transform-origin property I used before. This property is really important. I feel it is very useful for drawing pointers like this.
transform-origin: x-axis y-axis z-axis;

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: