高图-将数据标签中的秒数更改为时间(H:M:S)

布雷克

如何更改图表上的值以将其显示为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
}
塞巴斯蒂安·博尚(Sebastian Bochan)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章