在 Kendo 图表中的值轴上显示时间跨度

Question

我想在我的值轴上显示时间跨度值。图表对数字工作正常，但如果我更改为 TimeSpan，则没有任何显示。我查了资料，没问题。如果不支持 TimeSpan，是否有一种方法可以将 int 值中的分钟格式化为时间（即 ,6h 34 min"）

这是我的图表：

@(Html.Kendo().Chart<MachineWorkTimeChartViewModel>()
    .Name("chartMachineWorkTime")
     .DataSource(ds => ds.Read(read => read.Action("MachineWorkTimeChart_Read", "Charts")
    .ChartArea(chartArea => chartArea
        .Background("transparent")
    )
    .Series(series =>
    {
        series.Bar(e => e.WorkTimeSpan).Name("Time of work");
    })
    .CategoryAxis(axis => axis
        .Name("label-axis")
         .Categories(e => e.MachineName)
          .Line(line => line.Visible(false))
    )

)

这是我的 ViewModel：

    public class MachineWorkTimeChartViewModel
{
    public int WorkMinutes { get; set; }

    public string MachineName { get; set; }

    public TimeSpan WorkTimeSpan => TimeSpan.FromMinutes(WorkMinutes);
}

Answer 1

根据您的回答 ezanker 和来自 jgritty 的修改后的 js 函数 link 我让它工作了（我不想使用外部 js 库）。

完整示例如下：

@(Html.Kendo().Chart<MachineWorkTimeChartViewModel>()
    .Name("chartMachineWorkTime")
     .DataSource(ds => ds.Read(read => read.Action("MachineWorkTimeChart_Read", "Charts")
    .ChartArea(chartArea => chartArea
        .Background("transparent")
    )
    .Series(series =>
    {
        series.Bar(e => e.WorkMinutes).Name("Time of work");
    })
    .CategoryAxis(axis => axis
        .Name("series-axis")
        .Line(line => line.Visible(false))
    )
    .CategoryAxis(axis => axis
        .Name("label-axis")
         .Categories(e => e.MachineName)
    )
    .ValueAxis(axis => axis
        .Numeric()
            .Labels(labels => labels.Format("{0} min.")
             .Template("#= getTimeSpanFromMinutes(value) #"))
            // Move the label-axis all the way down the value axis
            .AxisCrossingValue(0, int.MinValue)
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0}%")
        .Template("#= getTimeSpanFromMinutes(value) #")
    ))


<script>

function getTimeSpanFromMinutes(newMinutes) {
    var minsPerYear = 24 * 365 * 60;
    var minsPerMonth = 24 * 30 * 60;
    var minsPerWeek = 24 * 7 * 60;
    var minsPerDay = 24 * 60;
    var minsPerHour = 60;
    var minutes = newMinutes;
    var years = Math.floor(minutes / minsPerYear);
    minutes = minutes - years * minsPerYear;
    var months = Math.floor(minutes / minsPerMonth);
    minutes = minutes - months * minsPerMonth;
    var weeks = Math.floor(minutes / minsPerWeek);
    minutes = minutes - weeks * minsPerWeek;
    var days = Math.floor(minutes / minsPerDay);
    minutes = minutes - days * minsPerDay;
    var hours = Math.floor(minutes / minsPerHour);
    minutes = minutes - hours * minsPerHour;

    var timeSpan = "";

    if (years > 0)
        timeSpan += years + " years ";
    if (months > 0)
        timeSpan += months + " months ";
    if (weeks > 0)
        timeSpan += weeks + " weeks ";
    if (days > 0)
        timeSpan += weeks + " days ";
    if (hours > 0)
        timeSpan += hours + " hours ";
    if (minutes > 0)
        timeSpan += minutes + " min. ";

    return timeSpan;
}</script>

在 Kendo 图表中的值轴上显示时间跨度

Show TimeSpan on Value Axis in Kendo Chart

asp.net-mvc

kendo-ui

kendo-asp.net-mvc

kendo-chart