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

我试图在进程的每分钟（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,
          }
      ]
    });

图表打印和选项创建如下所示：

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,
          }
      ]
    });

Highcharts.chart（'container'{
图表：{
类型：'bar'
},
标题：{
文本：“24小时状态变化：”+this.creName
},
学分：{
已启用：false
},
xAxis：{
},
亚克斯：{
最小值：矩（）.减去（1，'天'）.utc（）.valueOf（），
日期时间标签格式：{
第二个：“%A，%b%e，%H:%M:%S”，
分钟数：'%A，%b%e，%H:%M'，
小时数：“%A，%b%e，%H”，
日期：“%H:%M:%S”，
周：“%H:%M:%S”，
月份：“%H:%M:%S”，
年份：'%H:%M:%S'
}
},
工具提示：{
pointFormat:“{series.name}：{point.y:%A，%b%e，%H:%M:%S}
”，
分享：真的
},
图例：{
对
},
打印选项：{
酒吧：{
堆叠：“正常”
}
},
系列：[{
名称：“成功”，
颜色：“#6FF3A3”，
数据：statusSuccess，
类型：未定义，
},
{
名称：“失败”，
颜色：“#FF386C”，
数据：故障状态，
类型：未定义，
}
]
});

下面是我得到的图表：

但我期待的是：

---

由于

yAxis.min

属性为

NaN

，因此未绘制图表：

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

---

现场演示：

API参考：

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

数据

属性添加到图表中

备注：如果要将最后一个元素扩展到现在，则必须将另一个元素添加到图表系列数组中，最新的

条目.datetime

为“x”，而

new Date（）.getTime（）

为“x2”

var数据=[{
“id”：19，
“名称”：“x”，
“类型”：“作业”，
“状态”：“正在运行”，
“日期时间”：“2020-07-143:01:02.137”
},
{
“id”：20，
“名称”：“x”，
“类型”：“作业”，
“状态”：“正在运行”，
“日期时间”：“2020-07-143:01:02.137”
},
{
“id”：21，
“名称”：“x”，
“类型”：“作业”，
“状态”：“停止”，
“日期时间”：“2020-07-143:02:02.137”
},
{
“id”：22，
“名称”：“x”，
“类型”：“作业”，
“状态”：“正在运行”，
“日期时间”：“2020-07-143:03:02.137”
},
{
“id”：30，
“名称”：“x”，
“类型”：“作业”，
“状态”：“停止”，
“日期时间”：“2020-07-143:04:02.137”
},
{
“id”：31，
“名称”：“x”，
“类型”：“作业”，
“状态”：“正在运行”，
“日期时间”：“2020-07-143:05:02.137”
},
{
“id”：32，
“名称”：“x”，
“类型”：“作业”，
“状态”：“正在运行”，
“日期时间”：“2020-07-143:06:02.137”
},
{
“id”：33，
“名称”：“x”，
“类型”：“作业”，
“状态”：“正在运行”，
“日期时间”：“2020-07-143:07:02.137”
},
{
“id”：34，
“名称”：“x”，
“类型”：“作业”，
“状态”：“正在运行”，
“日期时间”：“2020-07-143:08:02.137”
},
{
“id”：35，
“名称”：“x”，
“类型”：“作业”，
“状态”：“停止”，
“日期时间”：“2020-07-143:09:02.137”
}
];
设latestMode=false；
让startTime=false；
设seriesData=[]；
用于（让输入数据）{
如果（！latestMode）{
latestMode=entry.state；
startTime=新日期（entry.datetime）；
}else if（latestMode！==entry.state）{
让currentTime=新日期（entry.datetime）；
seriesData.push({
x:startTime.getTime（），
x2:currentTime.getTime（），
y:latestMode==“正在运行”？0:1
});
开始时间=当前时间；
latestMode=entry.state；
}
}
Highcharts.chart（'容器'{
图表：{
类型：“xrange”
},
标题：{
文本：“作业状态”
},
可访问性：{
要点：{
descriptionFormatter:函数（点）{
var ix=点指数+1，
类别=点.Y类别，
起始日期=新日期（第x点），
to=新日期（点x2）；
从.toDateString（）返回ix+'.+category+'，'+from+
'到'+to.toDateString（）+''；
}
}
},
xAxis：{
键入：“日期时间”
},
亚克斯：{
标题：{
文本：“”
},
类别：[“正在运行”、“已停止”]，
对
},
系列：[{
名称：“作业状态”，
//点填充：0，
//分组填充：0，
边框颜色：“灰色”，
点宽：20，
数据：系列数据，
数据标签：{
已启用：true
}
}]
});
#容器{
高度：300px；
}
.highcharts图、.highcharts数据表{
最小宽度：320px；
最大宽度：800px；
保证金：1em自动；
}
.海图数据表{
字体系列：Verdana，无衬线；
边界塌陷：塌陷；
边框：1px实心#ebebebeb；
利润率：10px自动；
文本对齐：居中；
宽度：100%；
最大宽度：500px；
}
.highcharts数据表标题{
填充：1em 0；
字体大小：1.2米；
颜色：#555；
}
.海图数据表th{
字号：600；
填充：0.5em；
}
.highcharts数据表td、.highcharts数据表th、.highcharts数据表标题{
填充：0.5em；
}
.highcharts数据表thead tr、.highcharts数据表tr:n个子项（偶数）{
背景：#f8f8；
}
.highcharts数据表tr：悬停{
背格