jQuery-Plugin zur Implementierung des Dashboards

Das jQuery-Plug-In implementiert das Dashboard zu Ihrer Information. Die spezifischen Inhalte sind wie folgt

Ich habe ein einfaches Dashboard erstellt, das ein gängiger Messgerätetyp ist. Es ist nicht schwer zu implementieren, erfordert aber eine kleine Berechnung der Position.

Ergebnisse erzielen

Codeabschnitt

*{
 Rand: 0;
 Polsterung: 0;
}
.rel{
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
 Position: relativ;
}
.bp{
 Randradius: 50 %;
 Rand: 1px durchgehend hellgrau;
 Position: relativ;
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
 transformieren: drehen (-45 Grad);
}
.kd{
 Position: absolut;
 Breite: 100 %;
 Schriftgröße: 12px;
}
.Punkt{
 Hintergrundfarbe: hellgrau;
 Höhe: 100px;
 Breite: 20px;
 Randradius: 100 %;
 transformieren: drehen (90 Grad);
 Transform-Ursprung: 10px 0px;
 Z-Index: 9;
 Position: absolut;
 Übergang: alle 0,5 s;
}
.kb{
 Position: absolut;
 unten: 20px;
 Schriftgröße: 24px;
 Farbe: grau;
 Übergang: alle 0,5 s;
}

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <title>Erstellen Sie ein 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" />
  <Stil>
   #div{
    Rand: 1px durchgehend hellgrau;
    Breite: 90%;
    Höhe: 400px;
    Rand: 20px automatisch;
   }
  </Stil>
 </Kopf>
 <Text>
  <div id="div"></div>
 </body>
</html>
<Skript>
 var temp = zgybp("div");
 setzeIntervall(Funktion(){
  var f = Math.floor(Math.random()*101);
  temp.load(f);
 },700)
</Skript>

var zgybp = Funktion(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({
  "Breite":a,
  "Höhe":a
 })
 //Zeichne den Maßstab, zeichne nur 3/4 270/100=2,7, jeder Maßstab ist 2,7
 für(var i =100;i>=0;i--){
  $kd = $("<div class='kd'><span class='txt'>-</span></div>");
  wenn(i%5==0){
   $kd.find('.txt').text(i)
  }
  $kd.appendTo($bp);
  $kd.css("transformieren","drehen("+(i*2,7)+"Grad)");
 }
 $Punkt = $("<div class='Punkt'></div>")
 $punkt.appendTo($bp)
 $punkt.css({
  "links":a/2,
  "oben":a/2
 })
 $kb = $("<div class='kb'>0</div>");
 $kb.appendTo($id)
 //Dann drehe den Drehknopf um 1/8 des Winkels, es ist fast geschafft return{
  $id:$id,
  $bp:$bp,
  $Punkt:$Punkt,
  $kb:$kb,
  laden:Funktion(f){
   var das = dies;
   f = f<0?0:f>100?100:f;
   vartemp = parseInt(f)*2,7;
   das.$point.css({
    "transformieren": "drehen("+(90+temp)+"grad)"
   })
   das.zeichnen(f);
  },
  zeichnen:Funktion(f){
   var das = dies;
   das.$kb.text(f);
  }
 }
}

Umsetzungsideen

Als ich den Zähler am Auto sah, dachte ich daran, dieses Armaturenbrett einzubauen.
Dies gliedert sich in drei Schritte. Zuerst wird das Zifferblatt gezeichnet. Natürlich wird nur 3/4 gezeichnet. Dann wird der Zeiger gezeichnet und richtig positioniert. Zum Schluss wird der Zeiger entsprechend den Eingabeparametern an die entsprechende Position gedreht.
Ich habe die einfachsten Methoden gewählt, um sie alle umzusetzen. Ich möchte beispielsweise Text auf das Zifferblatt zeichnen, aber es ist zu voll, also muss ich in der Mitte eine Fünf zeichnen. Dann zeichne ich für den Zeiger direkt das deformierte Div. Hier verwende ich den Flex des übergeordneten Containers, um es zu zentrieren. Daher gibt es einen schwierigen Teil zu erklären, nämlich den Zeiger vom Mittelpunkt nach unten oder an andere vom Mittelpunkt abweichende Positionen zu verschieben. Wenn Sie möchten, dass der Zeiger mit der richtigen Skala ausgerichtet ist, gibt es bei der Berechnung der Ablenkungsdistanz einen zusätzlichen Konvertierungsschritt. Ich erinnere mich, dass es hier eine Funktion gab, aber ich erinnere mich nicht daran, also habe ich den Zeiger der Schönheit halber nicht nach unten verschoben.
Hier beachte ich noch die Transform-Origin-Eigenschaft, die ich zuvor verwendet habe. Diese Eigenschaft ist wirklich wichtig. Ich finde, sie ist sehr nützlich, um Zeiger wie diese zu zeichnen.
Transform-Origin: X-Achse, Y-Achse, Z-Achse;

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Ein Beispiel für die Verwendung von D3.js zur Implementierung eines einfachen und praktischen dynamischen Dashboards
js Canvas implementiert prozentuales Dashboard passend für mobile Endgeräte
js Canvas imitiert das Alipay Sesame Credit-Dashboard
Beispielcode für das ECharts-Dashboard (mit Quellcode-Download)

<<: So kompilieren und installieren Sie OpenCV unter Ubuntu

>>: Grafisches Tutorial zur Installation und Konfiguration komprimierter Pakete von MySQL 5.7.17