堆叠列不格式化 x 轴上的日期时间戳
Posted
技术标签:
【中文标题】堆叠列不格式化 x 轴上的日期时间戳【英文标题】：Stacked column does not format timestamp to date on x axis 【发布时间】：2019-04-12 11:39:33 【问题描述】：我创建了一个带有高位图表的简单堆积柱形图。我在这里处理了相当于高图表示例的数据：https://www.highcharts.com/demo/column-stacked 唯一的区别是我在 x 轴上有 unix 时间戳 问题：我的时间戳没有正确转换为日期格式：%Y-%m-%d 这是jsfiddle： https://jsfiddle.net/marialaustsen/e8d5snzt/
$(function()
Highcharts.createElement('link',
href: 'https://fonts.googleapis.com/css?family=Unica+One',
rel: 'stylesheet',
type: 'text/css'
, null, document.getElementsByTagName('head')[0]);
Highcharts.theme =
colors: ['#79ea61', '#2b908f', '#F09448', '#6E8CD0', '#aaeeee', '#ff0066',
'#f45b5b', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee', '#eeaaee'
],
chart:
backgroundColor:
linearGradient:
x1: 0,
y1: 0,
x2: 1,
y2: 1
,
stops: [
[0, '#152036'],
[1, '#1b2a47']
]
,
style:
fontFamily: '\'Unica One\', sans-serif'
,
plotBorderColor: '#1b2a47'
,
title:
style:
color: '#E0E0E3',
textTransform: 'uppercase',
fontSize: '20px'
,
subtitle:
style:
color: '#E0E0E3',
textTransform: 'uppercase'
,
xAxis:
gridLineColor: '#546c9b',
labels:
style:
color: '#E0E0E3'
,
lineColor: '#546c9b',
minorGridLineColor: '#546c9b',
tickColor: '#546c9b',
title:
style:
color: '#E0E0E3'
,
yAxis:
gridLineColor: '#546c9b',
labels:
style:
color: '#E0E0E3'
,
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
tickWidth: 1,
title:
style:
color: '#A0A0A3'
,
tooltip:
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style:
color: '#F0F0F0'
,
plotOptions:
series:
dataLabels:
color: '#E0E0E3'
,
marker:
lineColor: '#333'
,
boxplot:
fillColor: '#505053'
,
candlestick:
lineColor: 'white'
,
errorbar:
color: 'white'
,
legend:
itemStyle:
color: '#E0E0E3'
,
itemHoverStyle:
color: '#FFF'
,
itemHiddenStyle:
color: '#1b2a47'
,
credits:
style:
color: '#E0E0E3'
,
labels:
style:
color: '#E0E0E3'
,
drilldown:
activeAxisLabelStyle:
color: '#F0F0F3'
,
activeDataLabelStyle:
color: '#F0F0F3'
,
navigation:
buttonOptions:
symbolStroke: '#DDDDDD',
theme:
fill: '#1b2a47',
states:
hover:
fill: '#546c9b'
,
select:
fill: '#546c9b'
,
// scroll charts
rangeSelector:
buttonTheme:
fill: '#1b2a47',
stroke: '#000000',
style:
color: '#E0E0E3'
,
states:
hover:
fill: '#546c9b',
stroke: '#000000',
style:
color: '#FFFFFF'
,
select:
fill: '#071023',
stroke: '#000000',
style:
color: '#FFFFFF'
,
inputBoxBorderColor: '#E0E0E3',
inputStyle:
backgroundColor: '#152036',
color: '#E0E0E3',
fontWeight: 'bold',
states:
hover:
fill: '#546c9b',
stroke: '#000000',
style:
color: '#FFFFFF'
,
select:
fill: '#071023',
stroke: '#000000',
style:
color: '#FFFFFF'
,
labelStyle:
color: '#E0E0E3'
,
navigator:
handles:
backgroundColor: '#1b2a47',
borderColor: '#7798BF',
,
outlineColor: '#546c9b',
maskFill: 'rgba(255,255,255,0.1)',
series:
color: '#7798BF',
lineColor: '#546c9b'
,
xAxis:
gridLineColor: '#546c9b',
labels:
style:
color: '#FFF',
fontWeight: 'bold'
,
,
scrollbar:
barBackgroundColor: '#1b2a47',
barBorderColor: '#1b2a47',
buttonArrowColor: '#FFF',
buttonBackgroundColor: '#1b2a47',
buttonBorderColor: '#1b2a47',
rifleColor: '#FFF',
trackBackgroundColor: '#152036',
trackBorderColor: '#152036'
,
// special colors for some of the
/*legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
dataLabelsColor: '#B0B0B3',
textColor: '#FFF',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'*/
;
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
var chart = new Highcharts.Chart(
chart:
renderTo: 'container',
type: 'column'
,
title:
text: 'Probability above 1.5'
,
subtitle:
text: 'Prob most of the time 0 but in the early 2010 will start to have a shade going above'
,
xAxis:
type: 'datetime',
labels:
format: 'value:%Y-%m-%d'
,
tickInterval: 24 * 3600 * 1000,
,
yAxis:
min: 0,
max: 1.5,
title:
text: 'Temperature'
,
tooltip:
headerFormat: '<span style="font-size:10px">point.key</span><table>',
pointFormat: '<tr><td style="color:series.color;padding:0">series.name: </td>' +
'<td style="padding:0"><b>point.y:.1f C</b></td></tr>',
footerFormat: '</table>',
shared: true,
usehtml: true
,
plotOptions:
column:
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal'
,
series: [
name: 'Timestamp',
data: [-315622800000, -284000400000, -252400303000, -220864303000, -189328303000, -157705903000, -126169903000, -94633903000, -63097903000, -31475503000, 31596497000, 63132497000, 94754897000, 126290897000, 157826897000, 189362897000, 220985297000, 252521297000, 284057297000, 315593297000, 347215697000, 378751697000, 410287697000, 441823697000, 473446097000, 504982097000, 536518097000, 568054097000, 599676497000, 631212497000, 662748497000, 694220400000, 725842800000, 757378800000, 788914800000, 820450800000, 852073200000, 883609200000, 915145200000, 946681200000, 978303600000, 1009839600000, 1041375600000, 1072911600000, 1104534000000, 1136070000000, 1167606000000, 1199142000000, 1230764400000, 1262300400000, 1293836400000, 1325372400000, 1356994800000, 1388530800000, 1420066800000, 1451602800000, 1483225200000, 1514761200000, 1546297200000, 1577833200000]
,
name: 'Noneprobability',
data: [1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.4, 1.3, 1.2, 1.1, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4]
,
name: 'Probability',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.1]
]
)
);
【问题讨论】：
【参考方案1】：您必须将您的系列数据结构调整为 Highcharts 要求的格式。例如，您可以使用数组：data: [[0, 6], [1, 2]]，其中第一个值表示图表上的x，第二个值表示y：
所以，在你的例子中：
var timestamps = [-315622800000, -284000400000, ...];
...
var chart = new Highcharts.Chart(
...,
series: [
name: 'Noneprobability',
data: (function()
var data = [1.5, 1.5, ...];
data = data.map(function(el, i)
return [timestamps[i], el]
);
return data
)()
, ...]
)
现场演示： https://jsfiddle.net/BlackLabel/71wy5xzf/
API 参考： https://api.highcharts.com/highcharts/series.column.data
【讨论】：
非常感谢！现在日期在 x 轴上显示正确，唯一的问题是 1970 的值不显示.. 嗨@mialaustsen，您需要将0 值添加到timestamps 数组：jsfiddle.net/BlackLabel/juogwtxp以上是关于堆叠列不格式化 x 轴上的日期时间戳的主要内容，如果未能解决你的问题，请参考以下文章