#highcharts #unix-timestamp #stacked-chart #dateformatter
#высокие диаграммы #unix-временная метка #stacked-диаграмма #dateformatter #старшие диаграммы
Вопрос:
Я создал простую многоуровневую столбчатую диаграмму с высокими диаграммами. Я обработал данные, эквивалентные приведенному здесь примеру с высокими диаграммами: https://www.highcharts.com/demo/column-stacked Единственное отличие заключается в том, что у меня проблема с меткой времени unix на оси x: моя временная метка неправильно преобразуется в формат даты: %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
Комментарии:
1. Большое спасибо! Теперь даты отображаются правильно по оси x, единственная проблема заключается в том, что значение в 1970 не отображается..
2. Привет @marialaustsen, вам нужно добавить
0значение вtimestampsмассив: jsfiddle.net/BlackLabel/juogwtxp