Angular中Highcharts Gantt自定义Y轴各行高度的方法求助

Highcharts本身没有直接支持为甘特图每行设置独立高度的配置项，但可以通过DOM操作结合图表事件实现需求，以下是具体方案：

方案一：利用y轴标签格式化器+CSS动态设置行高 #

1. 在数据中保留行的多系列标识
   确保你的甘特图数据点中包含标识字段（比如hasMultipleSeries），用来区分该行是否包含多个系列。

2. 配置y轴标签格式化器，添加自定义类名
   在Angular组件的Highcharts配置中，通过yAxis.labels.formatter根据数据标识为对应行的DOM元素添加类名：

   // Angular组件中的Highcharts配置
   Highcharts.ganttChart('container', {
     // 其他原有配置...
     yAxis: {
       uniqueNames: true,
       max: 10,
       scrollbar: { enabled: true },
       labels: {
         formatter: function(this: Highcharts.AxisLabelsFormatterContextObject) {
           // 匹配当前行对应的数据点
           const targetPoint = this.axis.series[0].points.find(p => p.y === this.value);
           if (targetPoint && (targetPoint as any).hasMultipleSeries) {
             // 延迟执行确保DOM已渲染完成
             setTimeout(() => {
               const rowEl = document.querySelector(`[data-y="${this.value}"]`);
               rowEl?.classList.add('multi-series-row');
             }, 0);
           }
           return this.value;
         }
       }
     },
     // 其他原有配置...
   });
   

3. 添加CSS样式区分行高
   在组件的样式文件中定义不同行的高度与任务条偏移：

   /* 默认单行系列的行高 */
   .highcharts-yaxis-labels .highcharts-label {
     height: 28px;
     line-height: 28px;
   }
   
   /* 多系列行的行高 */
   .highcharts-yaxis-labels .multi-series-row {
     height: 56px;
     line-height: 56px;
   }
   
   /* 调整多系列行的任务条位置，避免垂直错位 */
   .multi-series-row ~ .highcharts-series-group .highcharts-point[data-y] {
     transform: translateY(14px);
   }
   

方案二：通过render事件动态调整行高与任务条位置 #

如果需要更精准的控制，可在图表的render事件中直接修改DOM元素样式与任务条位置：

Highcharts.ganttChart('container', {
  chart: {
    height: 400,
    events: {
      render: function(this: Highcharts.Chart) {
        const chart = this;
        // 遍历所有数据点，逐行调整
        chart.yAxis[0].series.forEach(series => {
          series.points.forEach(point => {
            const rowEl = chart.renderTo.querySelector(`[data-y="${point.y}"]`);
            const pointEl = point.graphic?.element;
            if (!rowEl || !pointEl) return;

            const isMultiSeries = (point as any).hasMultipleSeries;
            const baseHeight = 28;
            const multiHeight = 56;
            const offset = (multiHeight - baseHeight) / 2;

            if (isMultiSeries) {
              rowEl.style.height = `${multiHeight}px`;
              rowEl.style.lineHeight = `${multiHeight}px`;
              // 调整任务条垂直居中
              const currentTransform = pointEl.getAttribute('transform') || '';
              const yPos = parseFloat(currentTransform.split(',')[1]) || 0;
              pointEl.setAttribute('transform', `translate(0, ${yPos + offset})`);
            } else {
              rowEl.style.height = `${baseHeight}px`;
              rowEl.style.lineHeight = `${baseHeight}px`;
              // 还原任务条位置
              const currentTransform = pointEl.getAttribute('transform') || '';
              const yPos = parseFloat(currentTransform.split(',')[1]) || 0;
              pointEl.setAttribute('transform', `translate(0, ${yPos - offset})`);
            }
          });
        });
      }
    }
  },
  // 其他原有配置...
});

关键注意事项 #

• 确保数据中的hasMultipleSeries属性正确绑定到每个数据点上；
• 图表重绘（如窗口缩放、数据更新）时，render事件会自动触发，维持行高设置；
• 任务条的偏移量需根据行高差值的一半计算，保证任务条在垂直方向居中。

内容的提问来源于stack exchange，提问作者Estevao Santiago