Highcharts Gantt 上的背景事件答案

【问题标题】：Background event on Highcharts GanttHighcharts Gantt 上的背景事件
【发布时间】：2021-05-31 14:13:41
【问题描述】：

这是我们在 FullCalendar 之前在 resourceView 模式下使用的一个项目，用于显示来自算法的结果。在这个甘特图中，我们有作业，以及资源不可用的显示（此处为工作站）。

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

我们更改了 Highcharts 的反应性，特别是使用 Highcharts 更简单的重新排序，只是我不知道是否可以，如果可以，如何以“背景”模式显示在作业下传递的事件。你能帮我解决一下吗？

谢谢！

【问题讨论】：

请提供代码和一些示例数据 - 查看如何创建minimal reproducible example。
是的对不起，我更新了我的帖子
嗨@Minos，display events in "background" mode which passes under the jobs 到底是什么意思？
@ppotaczek 对不起，也许我的翻译有点糟糕。我只是想创建显示在工作事件后面的我的不可用事件，就好像有一个 zindex 的差异一样，在第一个屏幕截图中，灰色插槽是背景事件

【解决方案1】：

您需要为 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

【讨论】：

是的，我已经看过这个 api，但问题是绘图带填充了甘特图的整个高度。我需要一些可以适应每种资源的东西，因为它们都是独立的。有时您可能会遇到整个单元不可用但其他单元不可用的情况，有时工作站会持续几个小时不可用。
嗨@Minos，在这种情况下，您需要使用多边形系列：codesandbox.io/s/misty-moon-nx-vfjs4?file=/src/GanttMain.jsx 或通过Highcharts.SVGRenderer 渲染自定义形状类：api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
好的，我会看看多边形系列，非常感谢。我还被告知了 SVGRenderer，我还有另一个项目正在进行中，我还不能很好地测试，但是如果我设法将轴转换为小时来定义宽度，并将位置转换为 Y，那么这个解决方案对我来说似乎是正确的......我会测试！