垂直滚动时如何将highchart甘特图标题设置为固定

Question

我正在尝试创建计划甘特图。我基于资源管理示例创建了这个甘特图。到目前为止，很多好东西！我遇到一些问题，我将在上面单独发帖。

我要处理的下一个问题是，甘特图中有很多数据行。我添加了垂直滚动功能，但是滚动时图表上方的标题消失了。我已经找到了标题不滚动的示例，但是无法确定代码中的哪些内容可以使标题保持在原位。

这里是小提琴：https://jsfiddle.net/eddiem9/h9qw5rsj/15/

chart = Highcharts.ganttChart('container', {
series: series,
scrollablePlotArea: {
    minHeight: 700
},
plotOptions: {
    series: {
        color: '#FF0000'
    }
},
scrollbar: {
    enabled: true
},
title: {
    text: 'Irrigation Schedule',
    style: {
        color: '#000000',
        fontWeight: 'bold',
        fontSize: '24px'
    }
},

tooltip: {
    pointFormat: '<span>Schedule: {point.schedule}</span><br/><span>From: {point.start:%m/%d %H:%M}</span><br/><span>To: {point.end:%m/%d %H:%M}</span>'
},
xAxis:
[{
        labels: {
            format: '{value:%H}' // hour of the day (not working)
        },
        tickInterval: 1000 * 60 * 60, // HOUR
    }, {
        labels: {
            format: '{value:%B %e}' // day name of the week
        },
        tickInterval: 1000 * 60 * 60 * 24, // Day
    }

],
yAxis: {
    type: 'category',
    grid: {
        columns: [{
                title: {
                    text: 'Pump'
                },
                categories: map(series, function (s) {
                    return s.PumpName;
                })
            }, {
                title: {
                    text: 'Zone'
                },
                categories: map(series, function (s) {
                    return s.IrrigationZoneName;
                })
            }, {
                title: {
                    text: 'Status'
                },
                categories: map(series, function (s) {
                    return s.CurrentStatus;
                })
            }
        ]
    }
}

})

提前感谢！

埃迪

Answer 1

scrollablePlotArea对象必须在

chart对象内定义。

演示：https://jsfiddle.net/BlackLabel/bu5hfxm1/

  chart: {
    scrollablePlotArea: {
      minHeight: 700
    }
  },

API：https://api.highcharts.com/gantt/chart.scrollablePlotArea