$(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)] ] } ] }); });
利用highchair画出简易版甘特图
原创
©著作权归作者所有:来自51CTO博客作者275821115的原创作品,请联系作者获取转载授权,否则将追究法律责任
下一篇:考勤表格制作
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
linux之简易版HTTP服务器的实现
linux下实现简易版本的http服务器。
HTTP HTML C++文件流 C++输入输出流 -
vue3+dhtmlx-gantt实现甘特图
vue3+dhtmlx-gantt实现甘特图
甘特图 前端 gantt