ダッシュボードを実装するためのjQueryプラグイン

jQueryプラグインは、参考のためにダッシュボードを実装します。具体的な内容は次のとおりです。

一般的なタイプのメーターであるシンプルなダッシュボードを作成しました。実装は難しくありませんが、位置の計算が少し必要です。

成果を達成する

コードセクション

*{
 マージン: 0;
 パディング: 0;
}
.rel{
 ディスプレイ: フレックス;
 コンテンツを中央揃えにする。
 アイテムを中央揃えにします。
 位置: 相対的;
}
.bp{
 境界線の半径:50%;
 境界線: 1px 実線のライトグレー;
 位置:相対;
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 変換: 回転(-45度);
}
.kd{
 位置:絶対;
 幅: 100%;
 フォントサイズ: 12px;
}
。ポイント{
 背景色:ライトグレー;
 高さ: 100px;
 幅: 20px;
 境界線の半径:100%;
 変換: 回転(90度);
 変換の原点:10px 0px;
 zインデックス: 9;
 位置: 絶対;
 遷移: すべて 0.5 秒;
}
.kb{
 位置: 絶対;
 下: 20px;
 フォントサイズ: 24px;
 色: グレー;
 遷移: すべて 0.5 秒;
}

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>ダッシュボードを作成する</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/zgybp.js"></script>
  <link href="css/zgybp.css" rel="スタイルシート" type="text/css" />
  <スタイル>
   #div{
    境界線: 1px 実線のライトグレー;
    幅: 90%;
    高さ: 400px;
    マージン: 20px 自動;
   }
  </スタイル>
 </head>
 <本文>
  <div id="div"></div>
 </本文>
</html>
<スクリプト>
 var temp = zgybp("div");
 setInterval(関数(){
  var f = Math.floor(Math.random()*101);
  temp.load(f);
 },700)
</スクリプト>

var zgybp = 関数(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({
  "幅":a,
  「高さ」:a
 })
 //スケールを描きます。3/4 270/100=2.7 のみを描きます。各スケールは 2.7 です。
 (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("変換","回転("+(i*2.7)+"度)");
 }
 $point = $("<div class='point'></div>")
 $ポイントを追加します($bp)
 $ポイント.css({
  "左":a/2,
  「トップ」:a/2
 })
 $kb = $("<div class='kb'>0</div>");
 $kb.appendTo($id)
 //次にダイヤルを 1/8 の角度に回すと、ほぼそこに到達します。 return{
  $id:$id,
  $bp:$bp,
  $ポイント:$ポイント、
  $kb:$kb、
  ロード:関数(f){
   var that = this;
   f = f<0?0:f>100?100:f;
   var temp = parseInt(f)*2.7;
   .$point.css({
    "transform":"rotate("+(90+temp)+"deg)"
   })
   that.draw(f);
  },
  描画:関数(f){
   var that =これ;
   それ.$kb.text(f);
  }
 }
}

実装のアイデア

さて、車のメーターを見たときに、このダッシュボードを実装することを思いつきました。
これは 3 つのステップに分かれています。まず、ダイヤルが描画されます。もちろん、3/4 だけが描画されます。次に、ポインターが描画され、正しく配置されます。最後に、入力パラメータに従って、ポインターが対応する位置に回転されます。
最も簡単な方法を選んで実装しました。たとえば、文字盤に文字を描きたいのですが、文字が混み合っているため、真ん中に5を描かなければなりません。次に、ポインターについては、変形したdivを直接描画します。ここでは、親コンテナーのフレックスを使用して中央に配置します。そのため、説明が難しい部分があり、それは、ポインターを中心点から下または中心点から外れた他の位置に移動するということです。ポインターを正しいスケールに揃えたい場合は、偏向距離を計算するときに追加の変換ステップがあります。ここに関数があったと覚えていますが、覚えていないので、美しさのためにポインターを下に移動しませんでした。
ここで、前に使用した transform-origin プロパティにまだ注目しています。このプロパティは非常に重要です。このようなポインターを描画するのに非常に便利だと思います。
transform-origin: x軸 y軸 z軸;

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: