jQuery-Plugin zur Implementierung des Dashboards

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

Artikel empfehlen

So starten Sie mehrere MySQL-Instanzen in CentOS 7.0 (mysql-5.7.21)

Konfigurationsanweisungen Linux-System: CentOS-7....

Detaillierte Erläuterung zweier Methoden zum Festlegen globaler Variablen und Sitzungsvariablen in MySQL

1. Es gibt zwei Möglichkeiten, globale Variablen ...

Ausführliches Tutorial zur Installation von WinX64 unter MySQL8.0.18 (mit Bildern und Text)

Gehen Sie zu https://dev.mysql.com/downloads/mysq...

Reiner CSS-Code zum Erzielen eines Drag-Effekts

Inhaltsverzeichnis 1. Beispiel für Drag-Effekt 2....

Detaillierte Erklärung der Verwendung von DECIMAL im MySQL-Datentyp

Detaillierte Erklärung der Verwendung von DECIMAL...

Dynamischer Sternenhimmel Hintergrund umgesetzt mit CSS3

Ergebnis:Implementierungscode html <link href=...

Detaillierte Erklärung zur Einführung benutzerdefinierter Schriftarten (Font-Face) in CSS

Warum habe ich das verwendet? Alles begann mit de...

Beispielcode zur Implementierung des Regentropfen-Animationseffekts mit CSS

Glasfenster Was wir heute erreichen werden, ist d...

Allgemeiner HTML-Seitenstil (empfohlen)

Wie unten dargestellt: XML/HTML-CodeInhalt in die...

So verwenden Sie die Zusatzfunktionen von Vuex

Inhaltsverzeichnis Kartenstaat Kartengetter Karte...

Detaillierte Erklärung zur korrekten Verwendung der Zählfunktion in MySQL

1. Beschreibung Wenn wir in MySQL die Gesamtzahl ...

Beispielcode für HTML-Formularkomponente

HTML-Formulare werden verwendet, um verschiedene ...

Implementieren eines Einkaufswagens mit nativem JavaScript

In diesem Artikel wird der spezifische JavaScript...

Lösung für das Problem, dass nach dem Domänennamen zwei Schrägstriche // erscheinen, wenn nginx für den Domänennamenzugriff konfiguriert ist

Ich habe vor Kurzem meine persönliche Website neu...

Implementierung der Funktion zum Hinzufügen einer Besuchszählung im GitHub+Jekyll-Blog in einer Minute mit JS

Inhaltsverzeichnis Fügen Sie dem GitHub+Jekyll-Bl...