Highcharts gantt 图形记录

var chart = new Highcharts.Chart({

        chart: {

            type: 'bar',

            renderTo: 'container',

            inverted: true,//反转,

        },

        title: {

            text: "工程图"

        },

        plotOptions: {

            bar: {

                grouping: false,

                colorByPoint: true,

                pointWidth: 10,

                dataLabels: {

                    enabled: true,

                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',

                    formatter: function () {

                        var point = this.point;

                        var date1 = Highcharts.dateFormat('%Y-%m-%d', point.low);

                        var date2 = Highcharts.dateFormat('%Y-%m-%d', point.y)

                        return this.x + "(" + getDateDiff(date1, date2) + ")天";

                    }

                }

            }

        },

        tooltip: {

            borderWidth: 0,

            shadow: true,

            formatter: function () {

                var point = this.point;

                return '<b>' + point.category + '</b><br/>' +

                    Highcharts.dateFormat('%Y-%m-%d', point.low) + ' 至 ' +

                    Highcharts.dateFormat('%Y-%m-%d', point.y);

            }

        },

        legend: {

            reversed: true,

            enabled: false

        },

        xAxis: {

            tickLength: 0,

            gridLineWidth: 1, //纵向网格线宽度

            categories: ['test1', ' test2 ', ' test3 ', ' test4 '],

            labels: {

                rotation: -45,

                style: {

                    fontSize: '13px',

                    fontFamily: 'Verdana, sans-serif'

                }

            }

        },

        yAxis: {

            title: { text: null },

            gridLineWidth: 1,//横向网格线宽度

            tickInterval: (24 * 60 * 60 * 1000) * 30,

            type: 'datetime',

            min: Date.UTC(2016, 0, 0),

            max: Date.UTC(2016, 7, 30),

            labels: {

                rotation: -45,

                maxStaggerLines: 20,

                formatter: function () {

                    return Highcharts.dateFormat('%Y-%m-%d', this.value);

                }

            },

        },

        series: [{

            name: "工程图",

            data: [{

                name: " test1 ",

                low: Date.UTC(2016, 0, 10),

                y: Date.UTC(2016, 2, 5)

            },

                {

                    name: " test2 ",

                    low: Date.UTC(2016, 1, 10),

                    y: Date.UTC(2016, 3, 10)

                }, {

                    name: "木板",

                    low: Date.UTC(2016, 3, 15),

                    y: Date.UTC(2016, 4, 23)

                }, {

                    name: " test3 ",

                    low: Date.UTC(2016, 4, 15),

                    y: Date.UTC(2016, 5, 29)

                }

            ]

        }]

    });