リニアゲージを使ったJavaScriptのプログレスバーの作り方

統合JavaScript Linear Gauge コントロールは、主に温度、量、速度の範囲のようなゲージの値を表示するために使用される範囲内の線形スケールで.このサンプルでは、パッケージ配信のタイムラインまたはプログレスバーを作ることができますか?仕上げsample がGithubにある.
次の画像は、私たちの単純なリニアゲージを示していますonline samples . より大きな目盛りは値を表示します、そして、テキストラベルをもつポインタがあります.
このサンプルはとても面白いですが、出荷状態を示すのは全く正しくありません(測定の単位は少なくともパーセントでなければなりません).修正するには、syncfusion APIで許可されたカスタマイズを利用します.
我々の中でGitHub sample , 我々は基本的な出荷ステータスバーを作りました、しかし、それは少し退屈でした.だから、我々は、サンプルページ(リニア3)の下部に配置し、より興味深いオプションでつながった.風船は常に楽しいので、風船で他の作った!
我々は、3つのゲージの向こう側に異なるルックスを示します.各々のゲージは、max = 150とmin = 0で線形です.4段階を表すために0,50,100,150の4つのマーカーを定義した.我々はmarker pointer また、カラープロパティを利用して、未完成の、現在の値を表示します.

ノットスタート:ステージに到達していないか、起動します.

現在:パッケージがどこにあるか.

終了:パッケージが宛先に到達したとき.

public FinishedColor: string = '#f2a92f';
public NotStartedColor: string = '#eeeeee';
public CurrentActionColor: string = '#79564e';

サンプルをインタラクティブにするために、我々はスピナーで数値テキストボックスを追加しました.ユーザーは値を変更することができますし、ゲージに反映して参照してください.
NumericTextBox changeイベントはpositionChange関数を呼び出します.これらの色を変更する方法は、ユーザーが進行状況を参照してください.この関数には6つのケースがあり、ゲージには4つの値しかありません.それぞれのマーカについて3色を定義していたので、最初の点と最後の点についてはnotstartを処理しなければなりませんでした.

public positionChange(args: ChangeEventArgs) {
  switch (args.value) {
    case 0:
      this.updatePointerImage( this.NotStartedPointer, this.NotStartedPointer, this.NotStartedPointer, this.NotStartedPointer );
      this.updatePointerColor( this.NotStartedColor, this.NotStartedColor, this.NotStartedColor, this.NotStartedColor );
      this.updateRangeColor( this.NotStartedColor, this.NotStartedColor, this.NotStartedColor );
      break;
    case 1:
      this.updatePointerImage( this.CurrentActionPointer, this.NotStartedPointer, this.NotStartedPointer, this.NotStartedPointer );
      this.updatePointerColor( this.CurrentActionColor, this.NotStartedColor, this.NotStartedColor, this.NotStartedColor );
      this.updateRangeColor(this.NotStartedColor, this.NotStartedColor, this.NotStartedColor);
      break;
    case 2:
      this.updatePointerImage( this.FinishedPointer, this.CurrentActionPointer, this.NotStartedPointer, this.NotStartedPointer );
      this.updatePointerColor( this.FinishedColor, this.CurrentActionColor, this.NotStartedColor, this.NotStartedColor );
      this.updateRangeColor(this.FinishedColor, this.NotStartedColor, this.NotStartedColor);
      break;
    case 3:
      this.updatePointerImage( this.FinishedPointer, this.FinishedPointer, this.CurrentActionPointer, this.NotStartedPointer );
      this.updatePointerColor( this.FinishedColor, this.FinishedColor, this.CurrentActionColor, this.NotStartedColor );
      this.updateRangeColor(this.FinishedColor, this.FinishedColor, this.NotStartedColor);
      break;
    case 4:
      this.updatePointerImage(this.FinishedPointer, this.FinishedPointer, this.FinishedPointer, this.CurrentActionPointer );
      this.updatePointerColor(this.FinishedColor, this.FinishedColor, this.FinishedColor, this.CurrentActionColor );
      this.updateRangeColor(this.FinishedColor, this.FinishedColor, this.FinishedColor);
      break;
    case 5:
      this.updatePointerImage( this.FinishedPointer, this.FinishedPointer, this.FinishedPointer, this.FinishedPointer );
      this.updatePointerColor( this.FinishedColor, this.FinishedColor, this.FinishedColor, this.FinishedColor );
      this.updateRangeColor(this.FinishedColor, this.FinishedColor, this.FinishedColor);
      break;
    default:
      break;
  }
}

デフォルトの軸ラベルは数値です.これは、ゲージとしては、数字を示すためのものです意味があります.私たちはrender event for the axis labels を使ってラベルをテキストに変更しました.

//Provides label name for each stage
public axisLabelRender(args: IAxisLabelRenderEventArgs):void {
  if (args.value === 0) {
    args.text = 'Stage 1';
  } else if (args.value === 50) {
    args.text = 'Stage 2';
  } else if (args.value === 100) {
    args.text = 'Stage 3';
  } else if (args.value === 150) {
    args.text = 'Stage 4';
  } else {
      //prevents rendering of default label for second axis
    args.cancel = true;
  }
}


<ejs-lineargauge id="linear1" #gauge1 height="200px" title="Stage Progression" orientation="Horizontal"
      (axisLabelRender)="axisLabelRender($event)">

ファーストゲージ
リニアゲージコントロールが複数の軸を持つことができるので、我々はバルーンがゲージより上に浮くように2番目のものを作成しました.これにより、最初の軸を小切手で円として保つことができます.あなたが希望するこの軸のどこにマーカーを置くには無料です我々は、ちょうど彼らを同期させ続けることを選びました.

<!-- second axis to add images in the UI for each stage-->
<e-axis minimum="200" maximum="350" [line]='axisline' [minorTicks]="minorTick" [majorTicks]="majorTick">
    <e-pointers>
        <e-pointer type="Marker" markerType="Image" value="200" offset="-10" [imageUrl]="Stage1" height=50 width=50>
        </e-pointer>
        <e-pointer type="Marker" markerType="Image" value="250" offset="-10" [imageUrl]="Stage2" height=50 width=50>
        </e-pointer>
        <e-pointer type="Marker" markerType="Image" value="300" offset="-10" [imageUrl]="Stage3" height=50 width=50>
        </e-pointer>
        <e-pointer type="Marker" markerType="Image" value="350" offset="-10" [imageUrl]="Stage4" height=50 width=50>
        </e-pointer>
    </e-pointers>
</e-axis>

二次ゲージ
私たちは、画像としてマーカーを設定し、それらを1つだけ軸を使用して風船を置く.これらの風船は相殺されたかもしれません、しかし、ゲージは平らな線でありません.しかし、これを行うには、サンプルを再生することができます.

<e-pointers>
    <e-pointer type="Marker" markerType="Image" value="0" [imageUrl]="Stage1" height=30 width=30></e-pointer>
    <e-pointer type="Marker" markerType="Image" value="50" [imageUrl]="Stage2" height=30 width=30></e-pointer>
    <e-pointer type="Marker" markerType="Image" value="100" [imageUrl]="Stage3" height=30 width=30></e-pointer>
    <e-pointer type="Marker" markerType="Image" value="150" [imageUrl]="Stage4" height=30 width=30></e-pointer>
</e-pointers>

第三軌間
ここで実際の出荷状況の進行状況バーです.ポイント値100(第3段階)のマーカーを表示しないことにしました.これは、パッケージが特定の場所で定義されていません.また、ステージ名を変更して意味を成しました.
これは、1つのsyncfusionコントロールをカスタマイズできる方法の簡単な例です.我々は、我々の規制を柔軟にするために、多くの努力をしました.あなたがコントロールを作成する方法についての質問があるならば、以下のコメント部で、または、我々を通して我々に尋ねてくださいsupport forums , support portal , or feedback portal . サンプルを作成することができます.これは私たちの製品のスイートを成長させる方法です.私たちはあなたの提案をお楽しみに!