HighChart-绘制每分钟状态的堆积条形图

Question

我正试图绘制流程每分钟(24小时(状态变化(即运行或停止(的堆积条形图。图表只有y轴，其序列以毫秒为单位。但它似乎并没有像预期的那样绘制数据。

即将到来的数据如下：

19  x   job  process        Stop    NULL    2020-07-14 03:01:02.137 NULL
20  x   job  process        Running NULL    2020-07-14 03:02:02.137 NULL
21  x   job  process        Running NULL    2020-07-14 07:00:00.000 NULL
22  x   job  process        Running NULL    2020-07-14 07:01:00.000 NULL
23  x   job  process        Running NULL    2020-07-14 07:02:00.000 NULL
24  x   job  process        Running NULL    2020-07-14 07:03:00.000 NULL
25  x   job  process        Running NULL    2020-07-14 07:04:00.000 NULL
26  x   job  process        Stop    NULL    2020-07-14 07:05:00.000 NULL
27  x   job  process        Running NULL    2020-07-14 07:06:00.000 NULL
28  x   job  process        Running NULL    2020-07-14 07:07:00.000 NULL
29  x   job  process        Running NULL    2020-07-14 07:08:00.000 NULL

Wher x是作业名称，Running and stop是状态。我正在用javascript过滤这些数据，为图表创建我的数据系列，如下所示：

data.forEach((element)=>{
if(element.State=="Running"){
var datetime = moment(element.CreatedDateTime).utc().valueOf();
statusSuccess.push(datetime)
}
else{
var datetime = moment(element.CreatedDateTime).utc().valueOf();
statusFailure.push(datetime)
}
});

图表绘制和选项创建如下：

Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "24 Hrs Status Variation For: "+this.resoucreName
},
credits: {
enabled: false
},
xAxis: {

},
yAxis: {
min:moment().subtract(1, 'days').utc().valueOf(),
dateTimeLabelFormats: {
second: '%A, %b %e, %H:%M:%S',
minute: '%A, %b %e, %H:%M',
hour: '%A, %b %e, %H',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:%A, %b %e, %H:%M:%S}</b><br/>',
shared: true
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'Success',
color:'#6FF3A3',
data: statusSuccess,
type: undefined,
},
{
name: 'Failed',
color:'#FF386C',
data: statusFailure,
type: undefined,
}
]
});

下面是我得到的图表：Fiddle

但我期待着：预期Fiddle

Answer 1

X范围图(正如您在评论中所提到的(最适合这种情况，因为它可以用来显示堆叠条形图无法完成的交替状态。首先迭代所有作业状态，并在状态更改时("running"-"stop"/"stop"-"run"(将开始和结束的时间戳添加到新数组中。然后将此数组作为data属性添加到图表中。

备注：如果您想将最后一个元素扩展到现在，则必须将另一个元素添加到图表序列数组中，其中最新的entry.datetime为"；x〃；并且CCD_ 3为"0"；x2"；。

var data = [{
"id": 19,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:01:02.137"
},
{
"id": 20,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:01:02.137"
},
{
"id": 21,
"name": "x",
"type": "job",
"state": "Stop",
"datetime": "2020-07-14 03:02:02.137"
},
{
"id": 22,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:03:02.137"
},
{
"id": 30,
"name": "x",
"type": "job",
"state": "Stop",
"datetime": "2020-07-14 03:04:02.137"
},
{
"id": 31,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:05:02.137"
},
{
"id": 32,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:06:02.137"
},
{
"id": 33,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:07:02.137"
},
{
"id": 34,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:08:02.137"
},
{
"id": 35,
"name": "x",
"type": "job",
"state": "stop",
"datetime": "2020-07-14 03:09:02.137"
}
];
let latestMode = false;
let startTime = false;
let seriesData = [];
for (let entry of data) {
if (!latestMode) {
latestMode = entry.state;
startTime = new Date(entry.datetime);
} else if (latestMode !== entry.state) {
let currentTime = new Date(entry.datetime);
seriesData.push({
x: startTime.getTime(),
x2: currentTime.getTime(),
y: latestMode === 'running' ? 0 : 1
});
startTime = currentTime;
latestMode = entry.state;
}
}

Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Job state'
},
accessibility: {
point: {
descriptionFormatter: function(point) {
var ix = point.index + 1,
category = point.yCategory,
from = new Date(point.x),
to = new Date(point.x2);
return ix + '. ' + category + ', ' + from.toDateString() +
' to ' + to.toDateString() + '.';
}
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Running', 'Stopped'],
reversed: true
},
series: [{
name: 'Job state',
// pointPadding: 0,
// groupPadding: 0,
borderColor: 'gray',
pointWidth: 20,
data: seriesData,
dataLabels: {
enabled: true
}
}]
});

#container {
height: 300px;
}
.highcharts-figure, .highcharts-data-table table {
min-width: 320px; 
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>

这里还有一个篡改上面的代码

Answer 2

由于yAxis.min属性为NaN:，因此未绘制图表

yAxis: {
min: Date.UTC(yesterday),
...
}

---

现场演示：https://jsfiddle.net/BlackLabel/ps0L8cv9/

API参考：https://api.highcharts.com/highcharts/yAxis.min