Php 高图表时间格式

我正在使用Highcharts为我的项目显示一些图表

但是我在Yaxis上只显示时间（而不是日期）的基本条形图时遇到了一些问题。 我寻找了一些解决办法，但没有找到好的。 目前，我以毫秒为单位输入数据

但它给了我这个结果：

如您所见，它显示“无效日期”和毫秒，但我希望它是“00:00:00”。 在图表的底部，时间的格式很好，但它每24小时重置一次，而我不想要它。如果毫秒为62:00:00，我希望它显示为那样

我真的需要帮助，我不知道怎么做

这是我的jQuery代码：

$('#chartTimeSpent').highcharts({
            chart: {
                renderTo : 'chartTimeSpent',
                type: 'bar'
            },
            title: {
                text: 'Time spent per technicians ' + dateInterval
            },

            xAxis: {
                categories: [ 'Department','Department','Department','Department','Department','Department','Department','Department','Department','Department','Department','Department', ],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Time (hours)',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                },
                type: 'datetime',

                dateTimeLabelFormats : {
                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'
            }
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        "" +
                        'Time: '+ Highcharts.dateFormat('%H:%M:%S', this.x);
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -100,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF',
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [

                {name: 'Someone',
                     data: [300000 ,0,6720000 ,6600000 ,11400000 ,1500000 ,900000 ,0,0,300000 ,0,0, ] },{name: 'Someone',
                     data: [2100000 ,1800000 ,1200000 ,3300000 ,60600000 ,0,13920000 ,5400000 ,18900000 ,300000 ,0,0, ] },{name: 'Someone',
                     data: [9840000 ,223380000 ,300000 ,3120000 ,8760000 ,2460000 ,9300000 ,2820000 ,3960000 ,1320000 ,900000 ,540000 , ] },            ]
        });

---

编辑：

根据所需结果编辑： 你的主要问题是你有很多js错误（额外的逗号，等等）。修正了那些。现在，您的图表没有显示的原因（据我所知）是您的

图表.title

希望在它后面附加一个变量（

文本：“每个技师花费的时间”+dateInterval

），至少在JSFIDLE和您给出的示例代码中没有定义它

我已经用我认为你想要的东西更新了一个新的。请注意，表列表中的值与序列数据中的javascript时间不匹配

您的数据不包含任何时间值。您可以将其作为

[[time1，value]，[time2，value]…]

包含在数据系列中，或者您需要为xAxis（）指定一个起始位置，并告诉它每个数据点的增量是多少（）-假设您的数据在时间上是统一分离的-如下所示：

plotOptions: {
            series: {
                pointStart: Date.UTC(2010, 0, 1),
                pointInterval: 24 * 3600 * 1000 // one day
            }
        },

强烈建议您阅读找到的API文档

编辑答案：

你的图表还有很多其他问题： 您的yAxis不能是

类型：“datetime”

。即使你认为时间是绘制在yAxis上的，因为这是一个条形图，它仍然是xAxis。从yAxis中删除

类型

和

日期时间标签格式

项，并将其放入xAxis中

删除xAxix的

类别：

部分。不能混合使用日期时间和类别

序列数据点列表中有额外的逗号，最后一个序列项后有额外的逗号

您需要在“系列”部分中指定绘图选项

请参见示例。我建议使用JSFIDLE或任何其他“实时”javascript服务来测试您的代码

这是为了将时间显示为连续的小时：分钟，不考虑白天部分： 删除

类型：'datetime'

和house/min/sec等的标签格式化程序内容。 加入以下条文—

labels: {
            overflow: 'justify',
            formatter: function () {
                var seconds = (this.value / 1000) | 0;
                this.value -= seconds * 1000;

                var minutes = (seconds / 60) | 0;
                seconds -= minutes * 60;

                var hours = (minutes / 60) | 0;
                minutes -= hours * 60;
                return hours;
            }
        }

为了处理数据标签，我们需要进行一些其他的重新格式化。现在，请恕我直言，因为我不是js专家，我确信这过于冗长，可以用简单的方法完成

formatter: function () {
                    if (this.y === 0) {
                        return 0;
                    }
                    else {
                    var hours = (((this.y / 1000) / 60) / 60).toFixed(2);
                    var hourPortion = hours.toString().split(".")[0];
                    var minPortion = hours.toString().split(".")[1];
                    var minPortionUsed = (parseInt(hours.toString().split(".")[1]) * 0.6).toFixed(0);
                        if (minPortionUsed < 10) {
                            minPortionUsed = '0' + minPortionUsed.toString();
                        }
                    return hourPortion + ':' + minPortionUsed;
                    }
                }

格式化程序：函数（）{
if（this.y==0）{
返回0；
}
否则{
风险值小时数=（（本.y/1000）/60）/60.toFixed（2）；
var hourpartion=hours.toString（）.split（“.”[0]；
var minpartion=hours.toString（）.split（“.”[1]；
var minPortionUsed=（parseInt（hours.toString（）.split（“.”[1]）*0.6.toFixed（0）；
如果（使用的最小比例<10）{
minPortionUsed='0'+minPortionUsed.toString（）；
}
返回小时比例+'：'+minPortionUsed；
}
}

---

查看此更新。

谢谢您的回答，但我不明白您的第一个建议。什么是“时间”和“价值”？在我的案例中，每个人对每个部门都有一个持续时间（我可以用毫秒或00:00:00表示）。我试着像你说的那样包括绘图选项，但它什么也没有给我。@D3n，更新的答案。您的数据点需要一个x/y值，因为该数据是基于时间的，所以您的x值应该是时间。如果您想将数据设置为每个人在每个部门花费的时间，那么您需要删除并提供更多信息。我确实在JSFIDLE上看到了您的实时演示，但是如果我删除类别，将不再显示部门。我只是遵循了Highcharts的基本示例，他们将类别放在xAxis中。为了看得更清楚，这里有一个数据链接，我想放在这个图表中：啊！现在我明白了，您希望将每个技师项目作为一个系列，部门位于xAxix（类别）上，在yAxix上花费的时间格式化为人类可读的时间。是的，这是完全可行的。将很快更新答案。感谢您的快速回答！这几乎是我想要的，如果值显示在每个条旁边，这将是完美的。因此，我试图在plotOptions中的DataLabel中添加格式化程序，但它不起作用，我认为我做得不好