1

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

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

但它给了我这个结果： 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 , ] },            ]
        });

编辑：最后一个jsFiddle

4

1 回答 1

2

编辑基于期望的结果：您的主要问题是您有很多 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
            }
        },

强烈建议您阅读此处的 API 文档。

编辑答案：

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

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

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

您需要在系列部分中分配 plotOptions。

例如，请参见此处。我会推荐 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;
                    }
                }

请参阅此更新示例。

于 2013-05-31T19:49:19.987 回答