Time Highcharts折线图持续时间

Time Highcharts折线图持续时间,time,highcharts,duration,Time,Highcharts,Duration,我刚开始使用海图,有点卡住了 我需要画一个有人和时间的折线图。我编辑了一些在网上找到的代码,并有以下内容: $(function () { // Call Times $('#TotalCallDuration').highcharts({ chart: { type: 'line' }, title: { text: '', x: -20 //cent

我刚开始使用海图,有点卡住了

我需要画一个有人和时间的折线图。我编辑了一些在网上找到的代码,并有以下内容:

    $(function () {
    // Call Times
    $('#TotalCallDuration').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: '',
            x: -20 //center
        },
        xAxis: {
            categories: ['Person 1','Person 2','Person 3','Person 4','Person 5','Person 6','Person 7','Person 8','Person 9','Person 10','Person 11',]
        },
        yAxis: {
            title: {
                text: 'Total Call Duration'
            },
            type: 'time',
            labels: {
                formatter: function () {
                    var time = this.value;
                    var hours1=parseInt(time/3600000);
                    var mins1=parseInt((parseInt(time%3600000))/60000);
                    return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
                }   
            }
        },
        series: [{
            data: [7464000,4327000,3388000,3611000,3261000,5740000,9433000,8591000,8114000,3059000,10866000],
            dataLabels: {
                enabled: false,
                formatter: function () {
                    var time = this.y / 1000;
                    //var time = this.y;
                    var hours1=parseInt(time/3600);
                    var mins1=parseInt((parseInt(time%3600))/60);
                    return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
                }
            },
        }]
    });
});
$(函数(){
//通话时间
$(“#TotalCallDuration”)。高图({
图表:{
类型:“行”
},
标题:{
文本:“”,
x:-20/中心
},
xAxis:{
类别:[“一人”、“二人”、“三人”、“四人”、“五人”、“六人”、“七人”、“八人”、“九人”、“十人”、“十一人”]
},
亚克斯:{
标题:{
文本:“通话总持续时间”
},
键入:“时间”,
标签:{
格式化程序:函数(){
var时间=该值;
var hours1=parseInt(时间/3600000);
var mins1=parseInt((parseInt(时间%3600000))/60000);
返回(小时1<10?'0'+小时1:1)+':'+(分钟1<10?'0'+分钟1:1);
}   
}
},
系列:[{
数据:[746400043270003388000361100032616000574000094330008510008114000305900010866000],
数据标签:{
启用:false,
格式化程序:函数(){
var时间=此。y/1000;
//var-time=这个.y;
var hours1=parseInt(时间/3600);
var mins1=parseInt((parseInt(时间%3600))/60);
返回(小时1<10?'0'+小时1:1)+':'+(分钟1<10?'0'+分钟1:1);
}
},
}]
});
});
我还创造了

但是,我也想显示秒,因为目前我只显示HH:MM


另外,当我将鼠标悬停在该行上时,会弹出图例,但其显示时间以毫秒为单位,而不是HH:MM:SS

来更改yAxis标签中的格式,您可以使用工具提示并在那里设置格式

例如:

相关代码:

yAxis: {
  title: {
    text: 'Total Call Duration'
  },
  type: 'datetime',
  dateTimeLabelFormats: {
    minute: '%H:%M:%S'
  }
},
tooltip: {
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y: %H:%M:%S}</b><br/>'
},
yAxis:{
标题:{
文本:“通话总持续时间”
},
键入:“日期时间”,
日期时间标签格式:{
分钟:“%H:%M:%S”
}
},
工具提示:{
点格式:'\u25CF{series.name}:{point.y:%H:%M:%S}
},
要更改yAxis标签中的格式,您可以使用该标签更改工具提示的格式,并在其中设置格式

例如:

相关代码:

yAxis: {
  title: {
    text: 'Total Call Duration'
  },
  type: 'datetime',
  dateTimeLabelFormats: {
    minute: '%H:%M:%S'
  }
},
tooltip: {
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y: %H:%M:%S}</b><br/>'
},
yAxis:{
标题:{
文本:“通话总持续时间”
},
键入:“日期时间”,
日期时间标签格式:{
分钟:“%H:%M:%S”
}
},
工具提示:{
点格式:'\u25CF{series.name}:{point.y:%H:%M:%S}
},
有一个问题可以澄清您的问题:您在这个示例中包含的数据(7464000、4327000、3388000等)是以毫秒为单位的吗?我想是的,它是每秒1000次。这是我正在编辑的一个示例,我只是想确定一下,7464000毫秒=7464秒。对于通话量表来说,这似乎真的很高。有一个问题可以澄清你的问题:你在这个示例中包含的数据(7464000、4327000、3388000等)是以毫秒为单位的吗?我想是的,它是每秒1000次。这是我正在编辑的一个例子,我只是想确定一下,7464000毫秒=7464秒。这对于通话量图表来说似乎非常高。这工作得很好,但是如果我稍微将数据集更改为:data:[24030002700100018870004746007464000890400082940006926000971800039200036180001604000],纵轴上的第一个字符应该是00:00:00,但显示为1。Jan@user1315422这是一种日期-时间格式,因此您可以使用
day
DateTimeLabelFlomats
中覆盖该格式-示例:这工作得很好,但是如果我稍微将数据集更改为:data:[240300002701000188700047460007464000890400082940006926000971800039200036180001604000],纵轴上的第一个字符应为00:00:00,但显示为1。Jan@user1315422它是日期的日期时间格式,因此您可以使用
day
dateTimeLabelFromats
中覆盖该格式-示例: