xaxis 上的日期与 highcharts
Dates on xaxis with highcharts
我需要在图表的 x 轴上显示日期。我通过范围日期选择器收集数据,用户可以在其中输入 14 天的范围。我需要 x 轴上的第一个值作为范围的开始日期,最后一个值作为范围的结束日期。
我希望 xaxis 标签读取类似“2015 年 1 月 27 日”、“2015 年 1 月 28 日”之类的内容,或者在那个方向上的内容,每个抽动为 1 天。我已经阅读了 API-文档,并且我已经对图表的设置进行了很多尝试,但由于某种原因我无法让它工作。
$('#graphColumn').highcharts({
title: {
text: '',
x: -20 //center
},
xAxis: {
categories: [dayArray[0], dayArray[1], dayArray[2], dayArray[3], dayArray[4], dayArray[5], dayArray[6], dayArray[7], dayArray[8], dayArray[9], dayArray[10], dayArray[11], dayArray[12], dayArray[13]]
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
name: ' ',
data: series,
color: '#77B7C5',
marker: {
symbol: 'circle'
}
}, {
showInLegend: false,
name: '1 år sedan',
data: series1yearago,
color: "#71C73E",
marker: {
symbol: 'circle'
}
}]
});
这是我的图表。我知道 xaxis 现在设置了类别,但那只是暂时的,我知道它应该是日期时间。我的系列是常规的 int 数组,每个索引都有一个数字。如果能在这里提供任何帮助,我将不胜感激!
编辑:这是一个有效的 jsfiddle 示例:http://jsfiddle.net/g0p00tLv/1
您的数据及其格式是我们真正需要看到的。
您需要做以下两件事之一:
1) 将您的数据作为 [x,y] 对数组传递,其中 x 是纪元时间戳(以毫秒为单位)或 date.UTC 对象
2) 将您的数据作为单个 y 值数组传递,并使用 pointStart 和 pointInterval 属性正确设置日期轴。
参考:
http://api.highcharts.com/highcharts#plotOptions.series.pointStart
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval
如果您需要更多信息,请在此处设置工作 fiddle 示例并 post。
我需要在图表的 x 轴上显示日期。我通过范围日期选择器收集数据,用户可以在其中输入 14 天的范围。我需要 x 轴上的第一个值作为范围的开始日期,最后一个值作为范围的结束日期。 我希望 xaxis 标签读取类似“2015 年 1 月 27 日”、“2015 年 1 月 28 日”之类的内容,或者在那个方向上的内容,每个抽动为 1 天。我已经阅读了 API-文档,并且我已经对图表的设置进行了很多尝试,但由于某种原因我无法让它工作。
$('#graphColumn').highcharts({
title: {
text: '',
x: -20 //center
},
xAxis: {
categories: [dayArray[0], dayArray[1], dayArray[2], dayArray[3], dayArray[4], dayArray[5], dayArray[6], dayArray[7], dayArray[8], dayArray[9], dayArray[10], dayArray[11], dayArray[12], dayArray[13]]
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
name: ' ',
data: series,
color: '#77B7C5',
marker: {
symbol: 'circle'
}
}, {
showInLegend: false,
name: '1 år sedan',
data: series1yearago,
color: "#71C73E",
marker: {
symbol: 'circle'
}
}]
});
这是我的图表。我知道 xaxis 现在设置了类别,但那只是暂时的,我知道它应该是日期时间。我的系列是常规的 int 数组,每个索引都有一个数字。如果能在这里提供任何帮助,我将不胜感激!
编辑:这是一个有效的 jsfiddle 示例:http://jsfiddle.net/g0p00tLv/1
您的数据及其格式是我们真正需要看到的。
您需要做以下两件事之一:
1) 将您的数据作为 [x,y] 对数组传递,其中 x 是纪元时间戳(以毫秒为单位)或 date.UTC 对象
2) 将您的数据作为单个 y 值数组传递,并使用 pointStart 和 pointInterval 属性正确设置日期轴。
参考:
http://api.highcharts.com/highcharts#plotOptions.series.pointStart
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval
如果您需要更多信息,请在此处设置工作 fiddle 示例并 post。