Highcharts折线图时间持续时间

Question

我刚刚开始使用Highcharts而且有点卡住了。

我需要绘制一个包含人物和持续时间的折线图。我编辑了一些我在网上找到的代码并具有以下代码：

    $(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);
                }
            },
        }]
    });
});

我还创建了https://jsfiddle.net/MarcellusWallis/jnp6xodk/

但是，我还想显示当前只显示HH：MM的秒数。

此外，当我将鼠标悬停在线上时，我会获得图例弹出窗口，但其显示时间为毫秒而不是HH：MM：SS

Answer 1

要更改yAxis标签中的格式，您可以使用dateTimeLabelFormats，对于工具提示，您可以使用pointFormat并在那里设置格式。

示例：https://jsfiddle.net/s6t8ghvu/

相关代码：

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/>'
},