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