Highcharts 甘特图 - 条形图未垂直对齐

问题描述 投票:0回答:1

我正在努力处理 Highcharts 甘特图。
甘特图的条形未垂直对齐。一些栏与顶部对齐,另一些与底部对齐。我需要这些条垂直居中。
我为此创建了一个小提琴:jsfiddle

我的 highcharts 配置如下所示:

    {
   "chart":{
      "type":"xrange",
      "width":"1200",
      "height":"500"
   },
   "credits":{
      "enabled":"true",
      "text":"(c) ???"
   },
   "title":{
      "text":""
   },
   "xAxis":{
      "type":"datetime",
      "startOnTick":"true",
      "endOnTick":"true",
      "minPadding":"0",
      "maxPadding":"0",
      "tickInterval":"3600000",
      "minTickInterval":"3600000",
      "plotBands":[
         {
            "color":"rgba(0, 0, 0, 0.0)",
            "label":{
               "text":279
            },
            "from":1713765602000,
            "to":1713775407000
         },
         {
            "color":"rgba(0, 124, 176, 0.1)",
            "label":{
               "text":280
            },
            "from":1713775407000,
            "to":1713780248000
         },
         {
            "color":"rgba(0, 0, 0, 0.0)",
            "label":{
               "text":281
            },
            "from":1713780248000,
            "to":1713784897000
         },
         {
            "color":"rgba(0, 124, 176, 0.1)",
            "label":{
               "text":282
            },
            "from":1713784897000,
            "to":1713788101000
         },
         {
            "color":"rgba(0, 0, 0, 0.0)",
            "label":{
               "text":283
            },
            "from":1713788101000,
            "to":1713808800000
         }
      ],
      "gridLineWidth":1,
      "min":1713765600000,
      "max":1713808800000
   },
   "yAxis":{
      "title":"",
      "categories":[
         "Category 1",
         "Category 2",
         "Category 3",
         "Category 4",
         "Category 5",
         "Category 6",
         "Category 7",
         "Category 8",
         "Category 9",
         "Category 10",
         "Category 11"
      ],
      "reversed":"true"
   },
   "tooltip":{
      "enabled":"false"
   },
   "series":[
      {
         "name":"Category 1",
         "borderRadius":0,
         "pointWidth":10,
         "data":[
            {
               "x":1713775407000,
               "x2":1713777567000,
               "ring":280,
               "y":0,
               "annotation":""
            },
            {
               "x":1713780248000,
               "x2":1713782337000,
               "ring":281,
               "y":0,
               "annotation":""
            },
            {
               "x":1713784887000,
               "x2":1713786487000,
               "ring":282,
               "y":0,
               "annotation":""
            },
            {
               "x":1713786777000,
               "x2":1713787357000,
               "ring":282,
               "y":0,
               "annotation":""
            },
            {
               "x":1713788101000,
               "x2":1713790209000,
               "ring":283,
               "y":0,
               "annotation":""
            }
         ],
         "color":"rgba(0,124,176,1.0)"
      },
      {
         "name":"Category 2",
         "borderRadius":0,
         "pointWidth":10,
         "data":[
            {
               "x":1713775517000,
               "x2":1713777600000,
               "ring":280,
               "y":1,
               "annotation":""
            },
            {
               "x":1713780387000,
               "x2":1713782357000,
               "ring":281,
               "y":1,
               "annotation":""
            },
            {
               "x":1713784957000,
               "x2":1713786517000,
               "ring":282,
               "y":1,
               "annotation":""
            },
            {
               "x":1713788467000,
               "x2":1713795707000,
               "ring":283,
               "y":1,
               "annotation":""
            }
         ],
         "color":"rgba(212,215,0,1.0)"
      },
      {
         "name":"Category 3",
         "borderRadius":0,
         "pointWidth":10,
         "data":[
            {
               "x":1713774648000,
               "x2":1713774708000,
               "ring":279,
               "y":2,
               "annotation":""
            },
            {
               "x":1713774777000,
               "x2":1713775247000,
               "ring":279,
               "y":2,
               "annotation":""
            },
            {
               "x":1713779637000,
               "x2":1713780147000,
               "ring":280,
               "y":2,
               "annotation":""
            },
            {
               "x":1713784177000,
               "x2":1713784698000,
               "ring":281,
               "y":2,
               "annotation":""
            },
            {
               "x":1713787477000,
               "x2":1713787998000,
               "ring":282,
               "y":2,
               "annotation":""
            }
         ],
         "color":"rgba(211,211,211,1.0)"
      },
      {
         "name":"Category 4",
         "borderRadius":0,
         "pointWidth":10,
         "data":[
            {
               "x":1713792600000,
               "x2":1713808800000,
               "ring":283,
               "y":3,
               "annotation":"Category 8",
               "label":"19"
            }
         ],
         "color":"rgba(0,117,0,1.0)",
         "dataLabels":{
            "enabled":"true",
            "inside":"true",
            "format":"{point.label}"
         }
      },
      {
         "name":"Head Category",
         "borderRadius":0,
         "pointWidth":10,
         "data":[
            {
               "x":1713765600000,
               "x2":1713766500000,
               "ring":279,
               "y":-6+10,
               "annotation":"Category 5",
               "label":"1"
            },
            {
               "x":1713766500000,
               "x2":1713774660000,
               "ring":279,
               "y":-6+11,
               "annotation":"Category 6",
               "label":"2"
            },
            {
               "x":1713767400000,
               "x2":1713771000000,
               "ring":279,
               "y":-6+12,
               "annotation":"Category 7",
               "label":"3"
            },
            {
               "x":1713767400000,
               "x2":1713771000000,
               "ring":279,
               "y":-6+13,
               "annotation":"Category 8",
               "label":"4"
            },
            {
               "x":1713775260000,
               "x2":1713775380000,
               "ring":279,
               "y":-6+10,
               "annotation":"Crew delays related to people",
               "label":"6"
            },
            {
               "x":1713775380000,
               "x2":1713807600000,
               "ring":279,
               "y":-6+14,
               "annotation":"Category 5",
               "label":"7"
            },
            {
               "x":1713777540000,
               "x2":1713779640000,
               "ring":279,
               "y":-6+11,
               "annotation":"Category 9",
               "label":"8"
            },
            {
               "x":1713780120000,
               "x2":1713780240000,
               "ring":280,
               "y":-6+10,
               "annotation":"Category 6",
               "label":"9"
            },
            {
               "x":1713780120000,
               "x2":1713782340000,
               "ring":280,
               "y":-6+10,
               "annotation":"Category 5",
               "label":"10"
            },
            {
               "x":1713782340000,
               "x2":1713784200000,
               "ring":281,
               "y":-6+11,
               "annotation":"Category 5",
               "label":"11"
            },
            {
               "x":1713784680000,
               "x2":1713784860000,
               "ring":281,
               "y":-6+10,
               "annotation":"Category 6",
               "label":"12"
            },
            {
               "x":1713786480000,
               "x2":1713786780000,
               "ring":281,
               "y":-6+15,
               "annotation":"Category 5",
               "label":"13"
            },
            {
               "x":1713787380000,
               "x2":1713787500000,
               "ring":282,
               "y":-6+10,
               "annotation":"Category 10",
               "label":"14"
            },
            {
               "x":1713787980000,
               "x2":1713788100000,
               "ring":282,
               "y":-6+10,
               "annotation":"Category 5",
               "label":"15"
            },
            {
               "x":1713790200000,
               "x2":1713808800000,
               "ring":282,
               "y":-6+10,
               "annotation":"Category 5",
               "label":"16"
            },
            {
               "x":1713790200000,
               "x2":1713792600000,
               "ring":283,
               "y":-6+16,
               "annotation":"Category 5",
               "label":"17"
            },
            {
               "x":1713790800000,
               "x2":1713793200000,
               "ring":283,
               "y":-6+13,
               "annotation":"Category 11",
               "label":"18"
            }
         ],
         "color":"rgba(235,0,63,1.0)",
         "dataLabels":{
            "enabled":"true",
            "inside":"true",
            "format":"{point.label}"
         }
      }
   ],
   "navigation":{
      "buttonOptions":{
         "enabled":"false"
      }
   }
}



我尝试了这个解决方案,但无法使其工作:将系列合并为一个

谢谢您的支持。

highcharts highcharts-gantt
1个回答
0
投票

只需从配置中删除

"type":"xrange"
- 使用 ganttChart 构造函数时没有必要。

演示: https://jsfiddle.net/BlackLabel/8Ltv2rh5/

© www.soinside.com 2019 - 2024. All rights reserved.