时间格式与Highcharts [英] Time format with Highcharts
问题描述
我使用Highcharts为我的项目显示一些图表。
但我有一些问题需要用TIME（而不是日期）显示基本条形图，在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：'每个技术人员'+ dateInterval
}，
xAxis：{
类别：['Department'，'Department'，'Department'，'Department'，'Department' ，'Department'，'Department'，'Department'，'Department'，'Department'，'Department'，'Department'，]，
title：{$ b $ text：null
}
}，
yAxis：{
min：0，
title：{
文本：'时间（小时）'，
align：'high'
}，
标签：{
溢出：'justify'
}，
类型：'datetime'，
dateTimeLabelFormats：{
second：'％H：％M：％S'，
分钟：'％H：％M：％S' ，
小时：'％H：％M：％S'，
日：'％H：％M：％S'，
星期：'％H：％M：％S '，
月：'％H：％M：％S'，
年：'％H：％M：％S'
}
}，
tooltip：{
formatter：function（）{
return''+
+
'时间：'+ Highcharts.dateFormat（'％H：％M：％S '，this.x）;
plotOptions {
bar：{
dataLabels：{
enabled：true
}
}
}，
图例：{
layout：'vertical'，
align：'right'，
verticalAlign：'top'，
x：-100，
y：100，
floating：true，
borderWidth：1，
backgroundColor：'#FFFFFF'，
shadow：true
}，
学分：{
enabled：false
}，
series：[
{name：'Someone'，
data：[300000，0， 6720000,660000,114000000,1500000,900000,0,0300000,0,0，]}，{名称：'某人'，
数据：[2100000,1800000,120 000000,3300000,60600000,013920000,5400000,18900000,300000,0,0，]}，{名称：'某人'，
数据：[9840000,223380000,300000,3120000,8760000,260000,9300000 ，2820000，3960000，1320000，900000，540000，]}，]
}）;
EDITED ： last jsFiddle
b $ b你的主要问题是你有很多js错误（额外的逗号等）。修正了这些。现在，你的图表没有被显示（据我所知）的原因是你的 chart.title 期望一个var被附加到它（ text：'每个技术人员花费的时间'+ dateInterval ），并且至少在jsFiddle和您给出的示例代码中没有定义它。
我更新了一个新的 jsFiddle ，我认为它是你想要的。请注意，表格列表中的值与系列数据中的JavaScript时间不匹配。
您的数据不包含任何时间值。您将在数据序列中包含 [[time1，value]，[time2，value] ...] ，或者您将需要分配一个xAxis的开始位置（ pointStart ），并告诉它对每个数据点增量是（ pointInterval ） - 假设您的数据在时间上是统一的 - 就像这样：
plotOptions：{
系列：{
pointStart：Date.UTC（2010，0，1 ），
pointInterval：24 * 3600 * 1000 //一天
}
}，
强烈建议您阅读此处的API文档。
编辑答案：
你有很多其他东西是错误的机智h您的图表：
您的yAxis不能为类型：'datetime'。即使你认为时间被绘制在yAxis上，因为这是一个BAR图表，它仍然是xAxis。从yAxis中删除类型和 dateTimeLabelFormats 项目，并将其放入xAxis中。
移除您的xAxix的类别：部分。您不能混用日期时间和类别。
您在系列数据点列表中添加了额外的逗号，并且在最后一个系列商品之后添加了逗号。
您需要在系列部分中指定plotOptions。
请参阅这里。我会推荐jsFiddle或任何其他实时javascript服务来测试你的代码。
这是将时间显示为直线小时：分钟而不考虑日期部分：
删除类型：'datetime' 和标签格式化程序的东西，用于房屋/分钟/秒等
添加以下内容 -
labels：{
overflow：'justify'，
formatter：function（）{
var seconds =（this.value / 1000）| 0;
this.value - = seconds * 1000;
var分钟=（秒/ 60）| 0;
秒 - =分钟* 60;
var hours =（minutes / 60）| 0;
分钟 - =小时* 60;
回报小时;
$ b 为了处理dataLabels，我们需要做一些其他格式化。现在，带上一点盐，因为我不是一个js专家，我相信这是过分冗长的，可以用一个简单的方法完成。
formatter：function（）{
if（this.y === 0）{
return 0; $（b）
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（）.span（。）[1]）* 0.6）.toFixed（0）;
if（minPortionUsed< 10）{
minPortionUsed ='0'+ minPortionUsed.toString（）;
}
return hourPortion +'：'+ minPortionUsed;
}
}
更新 example 。
I'm using Highcharts to display some charts for my project.
But I have some problems to display a Basic Bar charts with only TIME (not the date) on Yaxis.
I searched some solutions but I didn't find the good one.
Currently, I put data in milliseconds.
But it gives me this result :
http://s14.postimg.org/z4vissaht/Capture_d_cran_2013_05_31_21_24_01.png
As you can see, it says me "Invalid Date" and milliseconds are display but I would like it to be "00:00:00".
In the bottom of the chart, time is in the good format but it resets every 24hours whereas I don't want it. If milliseconds makes 62:00:00, I want it to be displayed like that.
I really need help, I don't know how to do that.
There is my jQuery code :
$('#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 , ] }, ]
});
EDITED : last jsFiddle
解决方案 EDIT Based on desired outcome:
Your main issue is is that you have a lot of js errors (extra commas, etc). Fixed those. Now, the reason why your chart is not showing (as far as I can tell) is that your chart.title is expecting a var to be appending to it (text: 'Time spent per technicians ' + dateInterval) and at least in the jsFiddle and example code you give you do not define it.
I have updated a new jsFiddle with what I think it is you want. Note that the values in your table list do not match the javascript times in your series data.
Your data does not contain any time values. You are going to either include that in your data series as [[time1, value], [time2, value]...] or you are going to need to assign a starting position for the xAxis (pointStart) and also tell it what to each data point increment is (pointInterval) - assuming your data is separated in time uniformly - like this:
plotOptions: {
series: {
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day
}
},
Highly recommended you read the API documentation found here.
Edited answer:
You have much other stuff that is wrong with your chart here:
Your yAxis cannot be of type: 'datetime'. Even though you think the times are plotted on the yAxis because this is a BAR chart it is still the xAxis. Remove the type and dateTimeLabelFormats items from the yAxis and put in the xAxis instead.
Remove the categories: section for your xAxix. You cannot mix datetime and categories.
You have extra commas in the series data point list and an extra comma after the last series item.
You need to assign the plotOptions in the series section.
Please see here for example. I would recommend jsFiddle or any other "live" javascript service to test your code.
This is to show the time as just straight hours:minutes without concern for day part:
Remove the type: 'datetime' and the label formatter stuff for house/min/sec etc.
Add the following -
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;
}
}
To handle the dataLabels we need to do some other reformatting. Now, take this with a grain of salt as I am not a js expert and I am sure this is overly verbose and can be done with a simple method.
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;
}
}
See this updated example.
这篇关于时间格式与Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
