利用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)] ] } ] }); });
相关文章推荐
- highcharts 从后台动态改变数据
- jspdf + highcharts 实现导出存在highcharts图表的html页面
- Highcharts选项配置详细说明文档
- highchart 柱图设置 柱子宽度 柱子间距
- 使用 highchart 绘制柱状图的通用方法与接口
- highstock K线图 深入研究
- 基于Highchart制作仪表图和柱状图
- Highchart+EasyUI动态控制图表位置
- 家庭财务管理系统实战6-使用Highcharts插件动态展示支出趋向图饼图(pie)和线图(line)
- 家庭财务管理系统实战7-终结,源码
- Java与Highcharts实例(一) - Highcharts资料整理
- Java与Highcharts实例(二) - Hello Highcharts
- Java与Highcharts实例(三) - Hello Highcharts (后台Java传递数
- Java与Highcharts实例(四) - Hello Highcharts (后台Java传递数
- Java与Highcharts实例(五) -饼图数据传递(后台Java传递数
- highchart动态获取json数据,更新图标显示
- highchart导出图片中文乱码解决
- python highchart 时间戳转换
- HSV渐变色模型为Highcharts的分组堆叠柱图配置渐变色
- js第三方插件(消息 图形)