Верхняя диаграмма с указанием даты и времени

Question

Верхняя диаграмма с указанием даты и времени

На диаграмме области старшей диаграммы я должен добавить дату по оси x и удар по времени по оси y. Его за удар вовремя студент в месяц. Таким образом, он имеет n значений даты и времени и представляет его на диаграмме области. Как дата и время используются в области диаграммы? Это мой код.

Highcharts.chart('batch_range_chart', {
chart: {
type: 'area'
},
title: {
text: ''
},
subtitle: {
text: ''
},
yAxis: {
title: {
text: 'Time (hh:mm)'
},
type: 'datetime',

},
xAxis: {
title: {
text: 'Date'
},
type: 'datetime',
dateTimeLabelFormats: {
//month: '%b \'%y',
}

},

tooltip: {

//pointFormat: '{series.name} Check In Time <b>{point.y:,.0f}</b><br/>'
},
plotOptions: {
area: {

}
},
series: [{
name: 'Check In Time',
data: [
[1514831400, 10: 00: 00],
[1514917800, 14: 30: 00],
[1515004200, 11: 00: 00],
[1515090600, 09: 00: 00]
],
color: '#6767af'

}, ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="batch_range_chart" style="min-width:100%; height: 280px; margin: 0 auto">
</div>

0

charts highcharts php stacked-area-chart

Решение

По вопросам рекламы [email protected]

Accepted Answer

Для даты: Вы можете поставить дату как Date.UTC(2018, 10, 15)
На время Это одно числовое значение, которое вы можете рассчитать на основе секунд, минут или миллисекунд для отображения на графике.

yAxis форматер вы можете сохранить как:

formatter: function() {
var time = this.value;
var hours1 = parseInt(time / 60);
var mins1 = parseInt(parseInt(time % 60));
return hours1 + ':' + mins1;
}

В приведенном выше форматере он рассчитывает часы и минуты на основе общего количества минут. например, 100 минут = 1:40 утра

function minutesToHHMM (mins, twentyFour = false) {
let h = Math.floor(mins / 60);
let m = mins % 60;
m = m < 10 ? '0' + m : m;

if (twentyFour) {
h = h < 10 ? '0' + h : h;
return `${h}:${m}`;
} else {
let a = 'am';
if (h >= 12) a = 'pm';
if (h > 12) h = h - 12;
return `${h}:${m} ${a}`;
}
}



$(function() {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b'
}
},
yAxis: {
title: {
text: 'Time (hh:mm)'
},
max: 1440,
tickInterval: 10,
labels: {
formatter: function() {
var time = this.value;
return minutesToHHMM(time);
}
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
},
series: [{
data: [
[Date.UTC(2018, 10, 15), 1440],
[Date.UTC(2018, 10, 16), 200],
[Date.UTC(2018, 10, 17), 300],
[Date.UTC(2018, 10, 18), 0]
]

}]
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

1

Другие решения

Других решений пока нет …

Источник