Highcharts - 在数据标签中改变秒与时间（H：M：S）

Question

如何更改图表上的值以将其显示为HH：MI：SS而不是秒？

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: [{
                title: {
                    text: 'Temperature (°C)'
                }
            },{ // Secondary yAxis
                title: {
                    text: 'Rainfall'
                },
                 gridLineWidth: 0,
                    type: 'datetime', //y-axis will be in milliseconds
                    dateTimeLabelFormats: { //force all formats to be hour:minute:second
                        second: '%H:%M:%S',
                        minute: '%H:%M:%S',
                        hour: '%H:%M:%S',
                        day: '%H:%M:%S',
                        week: '%H:%M:%S',
                        month: '%H:%M:%S',
                        year: '%H:%M:%S'
                    },
                opposite: true
            }],
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name: 'Tokyo',
                yAxis: 1,
                data: [17.0*1000, 16.9*1000, 19.5*1000, 114.5*1000, 118.4*1000, 121.5*1000, 125.2*1000, 126.5*1000, 123.3*1000, 118.3*1000, 113.9*1000, 19.6*1000]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });

http://jsfiddle.net/9UGJc/

工作示例： http://jsfiddle.net/9UGJc/3/

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: [{
                title: {
                    text: 'Temperature (°C)'
                }
            },{ // Secondary yAxis
                title: {
                    text: 'Rainfall'
                },
                 gridLineWidth: 0,
                    type: 'datetime', //y-axis will be in milliseconds
                    dateTimeLabelFormats: { //force all formats to be hour:minute:second
                        second: '%H:%M:%S',
                        minute: '%H:%M:%S',
                        hour: '%H:%M:%S',
                        day: '%H:%M:%S',
                        week: '%H:%M:%S',
                        month: '%H:%M:%S',
                        year: '%H:%M:%S'
                    },
                opposite: true
            }],
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true,
                        formatter: function(){
                            if( this.series.index == 0 ) {
                                return secondsTimeSpanToHMS(this.y/1000) ;
                            } else {
                                return this.y;
                            }
                        }
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name: 'Tokyo',
                yAxis: 1,
                data: [17*1000, 16*1000, 19*1000, 114*1000, 118*1000, 121*1000, 125*1000, 126*1000, 123*1000, 118*1000, 113*1000, 19*1000]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });

function secondsTimeSpanToHMS(s) {
    var h = Math.floor(s / 3600); //Get whole hours
    s -= h * 3600;
    var m = Math.floor(s / 60); //Get remaining minutes
    s -= m * 60;
    return h + ":" + (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s); //zero padding on minutes and seconds
}

Answer 1

您可以使用datalabels formatter并使用Highcharts.dateFormat

Answer 2

只需更新此值

即可

data: [17.0*1000, 16.9*1000, 19.5*1000, 114.5*1000, 118.4*1000, 121.5*1000, 125.2*1000, 126.5*1000, 123.3*1000, 118.3*1000, 113.9*1000, 19.6*1000]
        }

使用此脚本将整数转换为时间格式

    var seconds = 9999;// multiply by 1000 because Date() requires milliseconds
    var date = new Date(seconds * 1000);
    var hh = date.getUTCHours();
    var mm = date.getUTCMinutes();
    var ss = date.getSeconds();
    // This line gives you 12-hour (not 24) time
    if (hh > 12) {hh = hh - 12;}
    // These lines ensure you have two-digits
    if (hh < 10) {hh = "0"+hh;}
    if (mm < 10) {mm = "0"+mm;}
    if (ss < 10) {ss = "0"+ss;}
    // This formats your string to HH:MM:SS
    var t = hh+":"+mm+":"+ss;
    document.write(t);

或使用此，

    var t = 34236; // your seconds
    var time = ('0'+Math.floor(t/3600) % 24).slice(-2)+':'+('0'+Math.floor(t/60)%60).slice(-2)+':'+('0' + t % 60).slice(-2)
    //would output: 09:30:36

Answer 3

您不需要创建该功能：

function secondsTimeSpanToHMS(s) { 
    var h = Math.floor(s / 3600); //Get whole hours
    s -= h * 3600;
    var m = Math.floor(s / 60); //Get remaining minutes
    s -= m * 60;
    return h + ":" + (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s); zero padding on minutes and seconds
}

代码中的

（http://jsfiddle.net/9UGJc/3/）在39行将代码更改为：

return Highcharts.dateFormat('%H:%M:%S', this.y);