您的位置:首页 > 大数据 > 人工智能

利用highchair画出简易版甘特图

2015-10-24 23:05 316 查看
$(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)]

]
} ]

});

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  highchart