Highcharts 甘特图的背景事件

问题描述

这里是我们之前在FullCalendar 中使用的一个项目，在resourceView 模式下显示a from a algorithm。在此甘特图中，我们有作业，以及资源不可用的显示（此处为工作站）。

沙盒：https://codesandbox.io/s/nice-microservice-fuv76?file=/src/GanttMain.jsx

以下是带有 Fullcalendar 的旧甘特图的屏幕截图：

我们更改了 Highcharts 的反应性，尤其是使用 Highcharts 会更简单的重新排序，只是我不知道是否有可能，如果是，如何在“后台”模式下显示通过作业的事件。你能给我一个解决方案吗？

谢谢！

解决方法

您需要对 x 轴使用绘图带：

xAxis: {
  ...,plotBands: [
    {
      from: 1613361600000,to: 1612841640000,color: "gray"
    }
  ]
}

---

现场演示： https://codesandbox.io/s/misty-moon-nx4y-nx4y8?file=/src/GanttMain.jsx

API 参考： https://api.highcharts.com/gantt/xAxis.plotBands