良いグラフィックTimeSpanの表現ですか？

私はTimeSpanを持っています。私はタイミング記録（2つの日付の間の期間など）を保存しており、それらを良いグラフィックで表現したいと思います。 TimeCirclesを使って表現するタイミングを設定する方法はありますか？このプラグインは特定の日付から今までのタイマーのように機能しますが、TimeSpanの値を表している間にタイマーを停止できますか？もしそうでなければ、クールなグラフィックで私のTimeSpanを表現する他のプラグインはありますか？良いグラフィックTimeSpanの表現ですか？

CODE：

<div class="col-md-4"> 
    <div class="ibox float-e-margins"> 
     <div class="ibox-title">Tempo di gestione minimo</div> 
     <div class="ibox-content"> 
      <h2> 
       Giorni: @Model.MinDate.Days<br /> 
       Ore: @Model.MinDate.Hours<br /> 
       Minuti: @Model.MinDate.Minutes<br /> 
       Secondi: @Model.MinDate.Seconds 
      </h2> 
     </div> 
    </div> 
</div> 
<div class="col-md-4"> 
    <div class="ibox float-e-margins"> 
     <div class="ibox-title">Tempo di gestione medio</div> 
     <div class="ibox-content"> 
      <h2> 
       Giorni: @Model.AvgDate.Days<br /> 
       Ore: @Model.AvgDate.Hours<br /> 
       Minuti: @Model.AvgDate.Minutes<br /> 
       Secondi: @Model.AvgDate.Seconds 
      </h2> 
     </div> 
    </div> 
</div> 
<div class="col-md-4"> 
    <div class="ibox float-e-margins"> 
     <div class="ibox-title">Tempo di gestione massimo</div> 
     <div class="ibox-content"> 
      <h2> 
       Giorni: @Model.MaxDate.Days<br /> 
       Ore: @Model.MaxDate.Hours<br /> 
       Minuti: @Model.MaxDate.Minutes<br /> 
       Secondi: @Model.MaxDate.Seconds 
      </h2> 
     </div> 
    </div> 
</div>

ここでは、私の時間のPICは

事前のおかげで、また私の悪い英語のため申し訳ありません値です。

出典

2017-03-10 Francesco Roggia

固定時間はTimeCirclesで表示できます。

あなたのタイムスパンは、秒に変換する場合：

public ActionResult Index() 
{ 
    // ... retrieve your timespan here ... 
    var time = new TimeSpan(1,2,3); 
    var seconds = time.TotalSeconds; 

    var responseModel = new MyViewModel 
    { 
     TimeInSeconds = seconds; 
    }; 

    return View(responseModel); 
}

を次に、あなたのページでは、停止状態でプラグインを初期化し、これが動作するように表示され、日、時間、ミンス、秒でうまく時間を表示します。 ..

@model MyViewModel 

<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.css" rel="stylesheet" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.js"></script> 
</head> 
<body> 
    <script type="text/javascript"> 
    $(function() { 
     // Start the timer in a stopped state and it will remain static 
     $(".example").TimeCircles({ "width": 100 }).stop(); 
    }); 
    </script> 

    <div class="example" data-timer="@Model.TimeInSeconds" style="width:400"></div> 
</body> 
</html>

私はこれが役立つことを願っています！

出典

2017-03-10 13:19:26 Luke

ありがとう、それは完璧に動作します！ –

喜んで助けてくれた：o） – Luke

良いグラフィックTimeSpanの表現ですか？

答えて

関連する問題