【问题标题】:Highcharts Gantt does not show ALL rows that are emptyHighcharts Gantt 不显示所有空行
【发布时间】:2020-02-05 03:07:00
【问题描述】:

我正在尝试创建调度甘特图。我的甘特图基于资源管理示例。到目前为止有很多好东西! 我遇到了一些问题,我会单独发帖。

第一个问题是甘特图隐藏了最后一行有数据之后的空行。在示例中,您可以看到甘特图中可见的最后一行是“TestPump | TestZone5”。但是,如果您查看数据,“TestPump | TestZone6”、“TestPump | TestZone”和“TestPumpExtra”有空行。

我希望显示那些空行。如果我移动最后一行数据,后面的内容都不会显示。

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

})

提前致谢!

艾迪

【问题讨论】:

    标签: highcharts highcharts-gantt


    【解决方案1】:

    使用max属性:

    yAxis: {
        max: 33,
        ...
    }
    

    现场演示: https://jsfiddle.net/BlackLabel/uty80hfj/

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

    【讨论】:

      猜你喜欢
      • 2023-03-08
      • 1970-01-01
      • 2021-11-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多