用于预览项目状态的甘特图

Question

那么，我如何在highcharts中实现这一目标？有人有一个密切的JSfiddle或代码吗？

所以，这是我到目前为止尝试的代码，我应该更新什么才能实现我的视觉效果，

帮助将不胜感激!!提前谢谢

var projects = [{
    name: 'Project 1',
    intervals: []
}, {
    name: 'Project 2',
    intervals: [{ // From-To pairs
        froam: Date.UTC(2010, 5, 21),
        to: Date.UTC(2015, 5, 21),
        label: 'Project 2',
        tooltip_data: 'this data'
    }]
}, {
    name: 'Project 3',
    intervals: [{ // From-To pairs
        from: Date.UTC(2011, 05, 16),
        to: Date.UTC(2012, 03, 21),
        label: 'Project 3',
        tooltip_data: 'this data'
    }, {
        from: Date.UTC(2013, 07, 09),
        to: Date.UTC(2015, 05, 22),
        label: 'Project 3',
        tooltip_data: 'this data'
    }]
}, {
    name: 'Project 9',
    intervals: [{ // From-To pairs
        from: Date.UTC(2013, 06, 17),
        to: Date.UTC(2014, 04, 21),
        label: 'Category 9',
        tooltip_data: 'this data'
    }, {
        from: Date.UTC(2015, 01, 22),
        to: Date.UTC(2015, 05, 22),
        label: 'Category 9',
        tooltip_data: 'this data'
    }]
}];

var series = [];
$.each(projects.reverse(), function (i, task) {
    var item = {
        name: task.name,
        data: []
    };
    $.each(projects.intervals, function (j, interval) {
        item.data.push({
            x: interval.from,
            y: i,
            label: interval.label,
            from: interval.from,
            to: interval.to,
            tooltip_data: interval.tooltip_data

        }, {
            x: interval.to,
            y: i,
            from: interval.from,
            to: interval.to,
            tooltip_data: interval.tooltip_data
        });

        // add a null value between intervals
        if (projects.intervals[j + 1]) {
            item.data.push(
                [(interval.to + projects.intervals[j + 1].from) / 2, null]
            );
        }

    });

    series.push(item);
});

// create the chart
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'aod-projectssummry-chart'
    },

    title: {
        text: 'Project History'
    },

    xAxis: {
        type: 'datetime'
    },

    yAxis: {
        visible : false,
        min: 0,
        max: 8,

        tickInterval: 1,
        tickPixelInterval: 200,
        labels: {
            style: {
                color: '#525151',
                font: '12px Helvetica',
                fontWeight: 'bold'
            },
            /* formatter: function() {
             if (tasks[this.value]) {
             return tasks[this.value].name;
             }
             }*/
        },
        startOnTick: false,
        endOnTick: false,
        title: {
            text: 'Criteria'
        },
        minPadding: 0.2,
        maxPadding: 0.2,
        fontSize: '15px'

    },

    legend: {
        enabled: false
    },
    tooltip: {
        formatter: function () {
            return '<b>' + tasks[this.y].name + '</b><br/>' + this.point.options.tooltip_data + '<br>' +
                Highcharts.dateFormat('%m-%d-%Y', this.point.options.from) +
                ' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to);
        }
    },

    plotOptions: {
        line: {
            lineWidth: 10,
            marker: {
                enabled: false
            },
            dataLabels: {
                enabled: true,
                align: 'left',
                formatter: function () {
                    return this.point.options && this.point.options.label;
                }
            }
        }
    },

    series: series

});