好的图形时间跨度表示？

Question

我有一个 TimeSpan 用于保存我的计时记录（例如两个日期之间的时间段），我想用一个好的图形来表示它们。有什么方法可以设置一个时间来表示使用TimeCircles吗？我知道这个插件从特定日期到现在就像计时器一样工作，但是我可以在代表我的 TimeSpan 值时停止计时器吗？如果没有，有没有其他插件可以用很酷的图形来表示我的 TimeSpan?

代码：

<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>

这是我的时间值的照片

提前致谢，也很抱歉我的英语不好。

Answer 1

您可以使用 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>

希望对您有所帮助！

好的图形时间跨度表示？

Good graphic TimeSpan representation?

javascript

asp.net-mvc

jquery

plugins

timespan