Highcharts gantt 图形记录
var chart = new
Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'container',
inverted: true,//反转,
},
title: {
text: "工程图"
},
plotOptions: {
bar: {
grouping: false,
colorByPoint: true,
pointWidth: 10,
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
formatter: function () {
var point = this.point;
var date1 = Highcharts.dateFormat('%Y-%m-%d', point.low);
var date2 = Highcharts.dateFormat('%Y-%m-%d', point.y)
return this.x + "(" + getDateDiff(date1, date2) + ")天";
}
}
}
},
tooltip: {
borderWidth: 0,
shadow: true,
formatter: function () {
var point = this.point;
return '' + point.category + '
' +
' +
Highcharts.dateFormat('%Y-%m-%d', point.low) + ' 至 ' +
Highcharts.dateFormat('%Y-%m-%d', point.y);
}
},
legend: {
reversed: true,
enabled: false
},
xAxis: {
tickLength: 0,
gridLineWidth: 1, //纵向网格线宽度
categories: ['test1', '
test2
', '
test3
', '
test4
'],
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: { text: null },
gridLineWidth: 1,//横向网格线宽度
tickInterval: (24 * 60 * 60 * 1000) * 30,
type: 'datetime',
min: Date.UTC(2016, 0, 0),
max: Date.UTC(2016, 7, 30),
labels: {
rotation: -45,
maxStaggerLines: 20,
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
},
},
series: [{
name: "工程图",
data: [{
name: "
test1
",
low: Date.UTC(2016, 0, 10),
y: Date.UTC(2016, 2, 5)
},
{
name: "
test2
",
low: Date.UTC(2016, 1, 10),
y: Date.UTC(2016, 3, 10)
}, {
name: "木板",
low: Date.UTC(2016, 3, 15),
y: Date.UTC(2016, 4, 23)
}, {
name: "
test3
",
low: Date.UTC(2016, 4, 15),
y: Date.UTC(2016, 5, 29)
}
]
}]
});