Highcharts 甘特图 (JS) - 删除 x 轴中的日期

Question

我在 JavaScript 中使用 Highcharts 甘特图。

我想停用 table 顶部的标题，这对我没用。屏幕截图上的红色矩形： https://files.normanfeltz.fr/files/2018-11-13_13-53-13.png

经过多次搜索和文档阅读，我没有找到如何去做。

JavaScript代码：

var today = new Date();

today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();

var day = 1000 * 60 * 60 * 24;
var map = Highcharts.map;
var dateFormat = Highcharts.dateFormat;

var controles = [
    {
        name: "SERIE 1",
        color: 'pink',
        operations: []
    },
    {
        name: "SERIE 2",
        color: 'green',
        operations: [
            {
                name: "LIGNE  1",
                from: today + 1000 * (6 * 3600 + 00 * 60 + 30),
                to: today + 1000 * (6 * 3600 + 10 * 60 + 53)
            },
            {
                name: "LIGNE  1",
                from: today + 1000 * (13 * 3600 + 49 * 60 + 44),
                to: today + 1000 * (14 * 3600 + 3 * 60 + 14)
            }
        ]
    },
    {
        name: "SERIE 3",
        color: 'orange',
        operations: [
            {
                name: "LIGNE  2",
                from: today + 1000 * (6 * 3600 + 10 * 60 + 47),
                to: today + 1000 * (6 * 3600 + 45 * 60 + 57)
            }
        ]
    },
    {
        name: "SERIE 4",
        color: 'red',
        operations: [
            {
                name: "LIGNE  1",
                from: today + 1000 * (9 * 3600 + 22 * 60 + 12),
                to: today + 1000 * (9 * 3600 + 31 * 60 + 01)
            }
        ]
    },
    {
        name: "SERIE 5",
        color: 'yellow',
        operations: [
            {
                name: "LIGNE  3",
                from: today + 1000 * (14 * 3600 + 14 * 60 + 56),
                to: today + 1000 * (14 * 3600 + 46 * 60 + 38)
            },
            {
                name: "LIGNE  1",
                from: today + 1000 * (6 * 3600 + 10 * 60 + 54),
                to: today + 1000 * (9 * 3600 + 1 * 60 + 15)
            },
            {
                name: "LIGNE  1",
                from: today + 1000 * (9 * 3600 + 31 * 60 + 11),
                to: today + 1000 * (9 * 3600 + 53 * 60 + 32)
            },
            {
                name: "LIGNE  1",
                from: today + 1000 * (10 * 3600 + 16 * 60 + 56),
                to: today + 1000 * (11 * 3600 + 30 * 60 + 55)
            },
            {
                name: "LIGNE  1",
                from: today + 1000 * (12 * 3600 + 2 * 60 + 10),
                to: today + 1000 * (13 * 3600 + 49 * 60 + 43)
            },
            {
                name: "LIGNE  4",
                from: today + 1000 * (9 * 3600 + 53 * 60 + 29),
                to: today + 1000 * (10 * 3600 + 19 * 60 + 39)
            },
            {
                name: "LIGNE  5",
                from: today + 1000 * (14 * 3600 + 47 * 60 + 17),
                to: today + 1000 * (15 * 3600 + 32 * 60 + 7)
            },
            {
                name: "LIGNE  5",
                from: today + 1000 * (15 * 3600 + 49 * 60 + 05),
                to: today + 1000 * (16 * 3600 + 9 * 60 + 37)
            }
        ]
    },
    {
        name: "SERIE 6",
        color: 'gray',
        operations: [
            {
                name: "LIGNE  1",
                from: today + 1000 * (9 * 3600 + 1 * 60 + 16),
                to: today + 1000 * (9 * 3600 + 22 * 60 + 11)
            },
            {
                name: "LIGNE  1",
                from: today + 1000 * (11 * 3600 + 30 * 60 + 56),
                to: today + 1000 * (12 * 3600 + 2 * 60 + 9)
            }
        ]
    },
    {
        name: "SERIE 7",
        color: 'blue',
        operations: [
            {
                name: "LIGNE  1",
                from: today + 1000 * (9 * 3600 + 31 * 60 + 02),
                to: today + 1000 * (9 * 3600 + 31 * 60 + 10)
            },
        ]
    },
    {
        name: "SERIE 8",
        color: 'purple',
        operations: []
    }
];

var lines = [];

var series = controles.map(function (controle, i) {
    var data = controle.operations.map(function (operation) {
        if (lines.indexOf(operation.name) == -1) {lines.push(operation.name)}
        return {
            id: 'operation-' + controle.name + "-" + lines.indexOf(operation.name),
            name: operation.name,
            color: controle.color,
            start: operation.from,
            end: operation.to,
            y: lines.indexOf(operation.name)
        };
    });
    return {
        name: controle.name,
        data: data
    };
});

Highcharts.ganttChart('container', {
    credits: {
        enabled: false
    },
    legend: {
        enabled: true,
        squareSymbol: false,
        symbolRadius: 0,
    },
    series: series,
    xAxis: {
        tickInterval: 3600 * 1000,
        gridLineWidth: 1
    },
    yAxis: {
        type: 'category',
        grid: {
            columns: [{
                categories: map(lines, function (line) {
                    return line;
                })
            }]
        }
    }
});

完整代码：https://jsfiddle.net/h72odjqu/

诺曼·费尔茨

Answer 1

Highcharts Gantt 增加了额外的xAxis，你可以这样隐藏它：

xAxis: [{
    tickInterval: 3600 * 1000,
    gridLineWidth: 1
}, {
    visible: false,
    opposite: false
}]

现场演示： https://jsfiddle.net/BlackLabel/dmcgyv78/

Highcharts 甘特图 (JS) - 删除 x 轴中的日期

Highcharts Gantt (JS) - Remove the day in x axis

javascript

gantt-chart

highcharts