利用highchair畫出簡易版甘特圖

$(function () {
    
	$('#container').highcharts({
	 
	    chart: {
	        type: 'columnrange',
	        inverted: true
	    },
	    
	    title: {
	        text: '項目進度圖'
	    },
	    
		subtitle: {
	        text: '更新時間：2015-10-24'
	    },
	
	    xAxis: {
	        categories: ['Jan', 'Feb', 'Mar'] //任務名稱
	    },
	    
	    yAxis: {
	       
            type:"datetime",
            title: {
                text: '時間'
            },
        
		
		dateTimeLabelFormats:
				{
				    day : '%m-%d'
				    /* second: '%H:%M:%S',
					minute: '%e. %b %H:%M',
					hour: '%b/%e %H:%M',
					day: '%e日/%b',
					week: '%e. %b',
					month: '%b %y',
					year: '%Y'  */
				},
        tickInterval: 24 * 3600 * 1000				
	    },
		
	 
	    plotOptions:{
            columnrange:{
                grouping:false
            }
        },
	     tooltip: {
            formatter: function() {

                return this.x + "<br>" + this.series.name + "<br>" + "日期：" +
                    Highcharts.dateFormat('%Y-%m-%e', this.point.low) + " ~ " +
                    Highcharts.dateFormat('%Y-%m-%e', this.point.high);
            }


        },
	    
	    
	    legend: {
	        enabled: false
	    },
	
	    series: [ {
	        name: '開發周期',
	        data: [
				[Date.UTC(2015,9,14), Date.UTC(2015,9,15)],  //只要采用的是Date.UTC的形式，必須將月份減掉1再傳入，否則會有時間錯位問題，切記！！
				[Date.UTC(2015,9,12), Date.UTC(2015,9,11)],
				[Date.UTC(2015,9,3), Date.UTC(2015,9,5)]
				
			]
	    }, {
	        name: '開發周期2',
	        data: [
				[Date.UTC(2015,9,15), Date.UTC(2015,9,16)],
				[Date.UTC(2015,9,14), Date.UTC(2015,9,17)],
				[Date.UTC(2015,9,5), Date.UTC(2015,9,7)]
				
			]
	    } ]
		
	
	});
    
});