高图甘特图行高度太大且未显示所有行

Question

我创建了一个简单的 Highcharts 甘特图，但样式不符合预期。行的高度太高了。因此，4 行中仅显示了 1.5 行。此外，该行的条并不相对于该行垂直居中。有人可以告诉我我缺少什么吗？谢谢。

我创建了一个小提琴用于测试：链接到小提琴

我的配置如下：

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<div id="container" style="height: 350px; min-width: 310px;"></div>

    Highcharts.ganttChart('container', {
           "credits":{
          "enabled":true,
          "href":"https://www.google.com",
          "text":"My credit"
       },
       "title":{
          "text":""
       },
       "series":[
          {
             "name":"Process 1",
             "color":"#FF0000",
             "data":[
                {
                   "start":1727224500000,
                   "end":1727227500000,
                   "name":"Process 1"
                },
                {
                   "start":1727232900000,
                   "end":1727288700000,
                   "name":"Process 1"
                },
                ...
             ],
             "pointWidth":30
          },
          {
             "name":"Process 2",
             "color":"#00FF00",
             "data":[
                {
                   "start":1727161200000,
                   "end":1727168400000,
                   "name":"Process 2"
                },
                {
                   "start":1727247600000,
                   "end":1727251200000,
                   "name":"Process 2"
                },
                ...
             ],
             "pointWidth":30
          },
          {
             "name":"Process 3",
             "color":"#0000FF",
             "data":[
                {
                   "start":1727184000000,
                   "end":1727184900000,
                   "name":"Process 3"
                },
                {
                   "start":1727210700000,
                   "end":1727211600000,
                   "name":"Process 3"
                },
                ...
             ],
             "pointWidth":30
          },
          {
             "name":"Process 4",
             "color":"#00FFFF",
             "data":[
                {
                   "start":1728108000000,
                   "end":1728152400000,
                   "name":"Process 4"
                }
             ],
             "pointWidth":10
          }
       ],
       "xAxis":{
          "currentDateIndicator":true,
          "min":1727136000000,
          "max":1728431999000,
          "grid":{
             "enabled":true
          },
          "gridLineWidth":1
       },
       "yAxis":{
          "title":"",
          "reversed":true,
          "uniqueNames":true,
          "grid":{
             "enabled":true
          }
       },
       "tooltip":{
          "pointFormat":"<span>{point.name}</span><br/>Start: {point.start:%Y-%m-%d %H:%M}<br/>Ende: {point.end:%Y-%m-%d %H:%M}"
       }
    });

Answer 1

最直接的答案是将所有数据合并到一个系列中，因为对于多个系列和

uniqueNames: true

，它开始将它们垂直分组：https://github.com/highcharts/highcharts/issues/ 11796#issuecomment-963625962.

您还可以设置

chart.height

值以匹配容器的高度或调整

yAxis.staticScale

以控制行高。

yAxis: {
    uniqueNames: true,
    staticScale: 10
}

参考资料：
https://api.highcharts.com/gantt/chart.height
https://api.highcharts.com/gantt/yAxis.staticScale