温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

利用highchair画出简易版甘特图

发布时间:2020-08-05 14:05:07 来源:网络 阅读:1579 作者:275821115 栏目:开发技术
$(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)]
				
			]
	    } ]
		
	
	});
    
});				



向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI