How to show time format(HH.MM.SS) in Kendo chart Y-axis

徘徊边缘 提交于 2019-12-11 05:15:35

问题


I have following JSON format,

[{ day: "YYY", avgSecond:  "100", waitSecond: "125"}, {day: "XXX", avgSecond:  "145", waitSecond: "117"} ,{day: "TTT", avgSecond:  "565", waitSecond: "340"},{day: "SSS", avgSecond:  "125", waitSecond: "250"}];

I need to show this data in kendo chart as, avgSecond and waitSecond in HH.MM.SS format in chart Y-axis and day in X-axis, My code as follows,

<div id="AvgChart"></div>

var seriesData = [{
    day: "YYY",
    second: "100",
    age: "125"
}, {
    day: "XXX",
    second: "145",
    age: "117"
}, {
    day: "TTT",
    second: "565",
    age: "340"
}, {
    day: "SSS",
    second: "125",
    age: "250"
}];

$("#AvgChart").kendoChart({
    title: {
        text: "Show Time in Seconds"
    },
    legend: {
        position: "bottom"
    },
    seriesDefaults: {
        labels: {
            visible: false
        }
    },
    series: [{
        name: "Averagetime",
        type: "line",
        color: "Blue",
        data: seriesData,
        field: "second",
        labels: {
            template: "#:convertTime(value)#"
        }
    }, {
        name: "WaitTime",
        type: "bar",
        color: "#ff0000",
        data: seriesData,
        field: "age",
        labels: {
            template: "#:convertTime(value)#"
        }
    }],    
    tooltip: {
        labels: {
            template: "#:convertTime(value)#"
        },
        visible: true,
    }
});


function convertTime(sec) {
    var hours = Math.floor(sec / 3600);
    (hours >= 1) ? sec = sec - (hours * 3600): hours = '00';
    var min = Math.floor(sec / 60);
    (min >= 1) ? sec = sec - (min * 60): min = '00';
    (sec < 1) ? sec = '00': void 0;

    (min.toString().length == 1) ? min = '0' + min: void 0;
    (sec.toString().length == 1) ? sec = '0' + sec: void 0;

    return hours + ':' + min + ':' + sec;
}

But Now problem Is I need to generate chart Y-axis in order to data, How can I do it, I found this Kendo dogo example : http://dojo.telerik.com/@tsvetomir/uvORE . How can I show time format in Y-Axis

来源:https://stackoverflow.com/questions/59108567/how-to-show-time-formathh-mm-ss-in-kendo-chart-y-axis

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!