甘特图纵向任务、横向时间显示图表可视化开发｜Highcharts甘特图示例

一、JS代码（倒置横向‑向下排布甘特图）

inverted:true 代表坐标轴翻转，普通甘特图：纵向任务、横向时间；倒置甘特图：横向任务、纵向时间轴向下递增

Highcharts.ganttChart('container', {

    chart: {
        inverted: true,
        plotBorderWidth: 1
    },

    title: {
        text: 'Inverted Gantt Chart'
    },

    accessibility: {
        keyboardNavigation: {
            seriesNavigation: {
                mode: 'serialize'
            }
        },
        point: {
            descriptionFormat: '{yCategory}. ' +
                '{#if completed}Task {(multiply completed.amount 100):.1f}% ' +
                'completed. {/if}' +
                'Start {x:%Y-%m-%d}, end {x2:%Y-%m-%d}.'
        }
    },

    lang: {
        accessibility: {
            axis: {
                xAxisDescriptionPlural: 'The chart has a two-part X axis ' +
                    'showing time in both week numbers and days.'
            }
        }
    },

    xAxis: [{
        opposite: false
    }, {
        opposite: false
    }],

    yAxis: {
        uniqueNames: true,
        opposite: true
    },

    series: [{
        name: 'Project 1',
        data: [{
            start: '2018-12-01',
            end: '2018-12-02',
            completed: {
                amount: 0.95
            },
            name: 'Prototyping'
        }, {
            start: '2018-12-02',
            end: '2018-12-05',
            completed: {
                amount: 0.5
            },
            name: 'Development'
        }, {
            start: '2018-12-08',
            end: '2018-12-09',
            completed: {
                amount: 0.15
            },
            name: 'Testing'
        }, {
            start: '2018-12-09',
            end: '2018-12-19',
            completed: {
                amount: 0.3,
                fill: '#fa0'
            },
            name: 'Development'
        }, {
            start: '2018-12-10',
            end: '2018-12-23',
            name: 'Testing'
        }]
    }]
});

二、Highcharts.ganttChart甘特图核心配置解析

1、inverted: true（倒置甘特图最关键）

普通默认甘特图：

• Y轴：任务名称（上下排列）
• X轴：时间（从左向右推移）

开启 inverted:true 坐标轴互换：

• X轴：任务名称（横向排布）
• Y轴：时间轴（从上往下递增，时间向下流动）>

也就是你所说“翻转向下”的效果，时间顺着页面从上到下走。

2、坐标轴配置

xAxis: [{opposite: false},{opposite: false}]
yAxis: {
    uniqueNames: true,
    opposite: true
}

• uniqueNames:true：任务名称唯一标识，避免重复任务渲染错位
• opposite:true：将Y轴（时间刻度）放置在图表右侧，适配倒置布局，防止时间刻度与任务标签互相遮挡

3、任务数据字段说明

字段和标准甘特图完全一致，不受倒置影响

4、无障碍 accessibility 配置

键盘导航、屏幕阅读器文本描述，汉化后用于读取出任务名、完成百分比、起止日期，适配无障碍系统。

三、倒置甘特图与普通甘特图对比

四、开发常见坑点

1. 坐标轴标签错乱：倒置后X/Y互换，不要沿用普通甘特图的坐标轴样式配置
2. 任务条形方向错误：inverted 必须写在顶层 chart 对象下，不能写在series
3. 时间标签被截断：倒置后时间轴跑到Y轴，建议开启 yAxis.opposite:true，刻度放右侧，提升可读性
4. 甘特图模块为Highcharts组件