Question

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

但是我在Yaxis上显示只有TIME（不是日期）的基本条形图时遇到了一些问题。我搜索了一些解决方案，但我找不到好的解决方案。目前，我把数据放在毫秒。

但它给了我这个结果： http://s14.postimg.org/z4vissaht/Capture_d_cran_2013_05_31_21_24_01.png

正如你所看到的，它告诉我“无效日期”和毫秒显示，但我希望它是“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 , ] },            ]
        });

已编辑：last jsFiddle

Answer 1

编辑根据预期结果：你的主要问题是你有很多js错误（额外的逗号等）。修正了那些。现在，您的图表未显示（据我所知）的原因是您的chart.title期望var附加到它（text: 'Time spent per technicians ' + dateInterval）并且至少在jsFiddle和示例中你给的代码没有定义它。

我已根据您的想法更新了新的jsFiddle。请注意，表格列表中的值与系列数据中的javascript时间不匹配。

您的数据不包含任何时间值。您将在数据系列中将其包含在[[time1, value], [time2, value]...]中，或者您需要为xAxis（pointStart）指定一个起始位置，并告诉它每个数据点的增量是多少（ pointInterval） - 假设您的数据在时间上是统一分开的 - 就像这样：

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

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

编辑回答：

你的图表还有很多其他问题：您的yAxis不能是type: 'datetime'。即使您认为时间是在yAxis上绘制的，因为这是一个BAR图表，它仍然是xAxis。从yAxis中删除type和dateTimeLabelFormats项，然后将其放入xAxis。

删除xAxix的categories:部分。您不能混合日期时间和类别。

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

您需要在系列部分中指定plotOptions。

请参阅here。我会推荐jsFiddle或任何其他“实时”javascript服务来测试你的代码。

这是为了将时间显示为直接的小时：分钟而不关心日期部分：删除type: 'datetime'和标签格式化器的内容/分钟/秒等。添加以下内容 -

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;
            }
        }

要处理dataLabels，我们需要进行其他一些重新格式化。现在，我带着一点点盐，因为我不是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;
                    }
                }

请参阅此更新example。

Highcharts的时间格式

1 个答案: