Highcharts Gantt不会显示所有为空的行 [英] 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.

第一个问题是，甘特图会隐藏最后一行包含数据的行之后为空的行.在示例中，您可以看到在甘特图中可见的最后一行是"TestPump | TestZone5"的.但是，如果查看数据，则"TestPump | TestZone6"，"TestPump | TestZone"和"TestPumpExtra"的行为空.

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.

这是小提琴: 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;
                    })
                }
            ]
        }
    }

})

提前谢谢！

Eddie

推荐答案

使用 max 属性:

yAxis: {
    max: 33,
    ...
}

---

实时演示: https://jsfiddle.net/BlackLabel/uty80hfj/

API参考: https://api.highcharts.com/gantt/yAxis.max

这篇关于Highcharts Gantt不会显示所有为空的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！