Highcharts Gantt does not show ALL rows that are empty

问题

I am trying to create a scheduling Gantt. I've based this gantt off of the Resource Management example. Lots of good stuff so far! I'm having a few problems, which I will make separate posts for.

The first problem is that the Gantt hides rows that are empty after the last row that has data. In the example, you can see that the last row visible in the Gantt is for "TestPump | TestZone5". However, if you look at the data, there are empty rows for "TestPump | TestZone6", "TestPump | TestZone" and "TestPumpExtra".

I would like those empty rows to be displayed. If I move the last row of data around, whatever is after is does not display.

Here's the fiddle: 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;
                    })
                }
            ]
        }
    }

})

Thanks in advance!

Eddie

回答1:

Use max property:

yAxis: {
    max: 33,
    ...
}

Live demo: https://jsfiddle.net/BlackLabel/uty80hfj/

API Reference: https://api.highcharts.com/gantt/yAxis.max

来源：https://stackoverflow.com/questions/60068476/highcharts-gantt-does-not-show-all-rows-that-are-empty

标签

Highcharts

highcharts-gantt