Highcharts gantt 类似效果图,记录非原创
2016-04-19 15:11
204 查看
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Gante.aspx.cs" Inherits="Env.Web.Improt.Gante" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--#include file='/HTMLTemplate/HeaderTemplate.html'-->
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'container',
// inverted: true,//反转,
},
title: {
text: "工程图"
},
plotOptions: {
bar: {
maxPointWidth: 30,
//grouping: true,
//colorByPoint: true,
pointWidth: 8,
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 point.name + "：" + getDateDiff(date1, date2) + "天";
},
}
},
series: {
dataLabels: {
enabled: true,
color: 'red'
}
}
},
tooltip: {
borderWidth: 0,
shadow: false,
formatter: function () {
var point = this.point;
return '<b>' + point.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d', point.low) + ' 至 ' +
Highcharts.dateFormat('%Y-%m-%d', point.y);
}
},
legend: {
enabled: true,
},
credits: {
enabled: false
},
xAxis: {
tickLength: 0,
gridLineWidth: 1, //纵向网格线宽度
min: 0, max: 5,
minPadding: 0.2,
maxPadding: 0.2,
fontSize:'15px',
categories: ['', '', '', '', '', ''], //['基层', '天花', '墙面', '地面', '门窗', '收纳'],
},
yAxis: {
title: { text: null },
gridLineWidth: 1,//横向网格线宽度
tickInterval: (24 * 60 * 60 * 1000) * 15,
//tickPixelInterval: 150, //轴上的间隔
type: 'datetime',
min: Date.UTC(2016, 0),
max: Date.UTC(2016, 6, 30),
labels: {
rotation: 90,
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
},
},
series: [{
data: [{
name: "基层-甲醇",
low: Date.UTC(2016, 0, 10),
y: Date.UTC(2016, 2, 5)
}, {
name: "基层-甲醇B",
low: Date.UTC(2016, 2, 10),
y: Date.UTC(2016, 4, 5),
color: '#f15c80'
}]
}
/*, {
name: "天花",
data: [{
name: "甲醇",
low: Date.UTC(2016, 1, 1),
y: Date.UTC(2016, 2, 3)
}]
}, {
name: "天花",
data: [{
name: "甲醇",
low: Date.UTC(2016, 2, 1),
y: Date.UTC(2016, 3, 3)
}]
}, {
name: "天花",
data: [{
name: "甲醇",
low: Date.UTC(2016, 4, 1),
y: Date.UTC(2016, 5, 3)
}]
},*/
]
});
// //第二部分
// $('#containers').highcharts({
// chart: {
// type: 'columnrange',
// inverted: true
// },
// title: {
// text: 'Temperature variation by month'
// },
// xAxis: {
// min: 0, max: 5,
// categories: ['基层', '天花', '墙面', '地面', '门窗', '收纳'],
// },
// yAxis: {
// title: { text: null },
// gridLineWidth: 1,//横向网格线宽度
// tickInterval: (24 * 60 * 60 * 1000) * 7,
// 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);
// }
// },
// },
// tooltip: {
// borderWidth: 0,
// shadow: true,
// formatter: function () {
// var point = this.point;
// return '<b>' + point.category + '-' + point.name + '</b><br/>' +
// Highcharts.dateFormat('%Y-%m-%d', point.low) + ' 至 ' +
// Highcharts.dateFormat('%Y-%m-%d', point.high);
// }
// },
// plotOptions: {
// columnrange: {
// pointWidth: 8,
// 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.high)
// return this.x + '-' + point.name + "：" + getDateDiff(date1, date2) + "天";
// }
// }
// }
// },
// legend: {
// reversed: true,
// enabled: true
// },
// series: [{
// data: [
// { name: "基层", low: Date.UTC(2016, 1, 10), high: Date.UTC(2016, 2, 10) }
// //{ name: "基层", low: Date.UTC(2016, 0, 15), high: Date.UTC(2016, 3, 10) }
// //[Date.UTC(2016, 1, 10), Date.UTC(2016, 2, 10)],
// //[Date.UTC(2016, 0, 15), Date.UTC(2016, 3, 10)]
// ]
// }, {
// data: [
// { name: "天花", low: Date.UTC(2016, 1, 15), high: Date.UTC(2016, 2, 3) },
// { name: "天花", low: Date.UTC(2016, 0, 10), high: Date.UTC(2016, 3, 9) }
// // //[0, Date.UTC(2016, 1, 15), Date.UTC(2016, 2, 3)],
// // //[1, Date.UTC(2016, 0, 10), Date.UTC(2016, 3, 9)]
// ]
// }]
// });
});
//$(function () {
// // Define tasks
// var tasks = [
// {
// name: '基层',
// intervals: [{ // From-To pairs
// from: Date.UTC(2010, 5, 21),
// to: Date.UTC(2015, 5, 21),
// label: '基层-甲醇'
// }]
// }, {
// name: '天花',
// intervals: [{ // From-To pairs
// from: Date.UTC(2010, 5, 21),
// to: Date.UTC(2010, 5, 21),
// label: '天花-木板'
// }]
// }, {
// name: '墙面',
// intervals: [{ // From-To pairs
// from: Date.UTC(2011, 05, 16),
// to: Date.UTC(2012, 03, 21),
// label: '墙面-服饰'
// }, {
// from: Date.UTC(2013, 07, 09),
// to: Date.UTC(2015, 05, 22),
// label: '墙面-装饰'
// }]
// }, {
// name: '地面',
// intervals: [{ // From-To pairs
// from: Date.UTC(2013, 07, 18),
// to: Date.UTC(2015, 05, 22),
// label: '地面-前面'
// }]
// }, {
// name: '门窗',
// intervals: [{ // From-To pairs
// from: Date.UTC(2013, 06, 17),
// to: Date.UTC(2014, 04, 21),
// label: '门窗-窗帘'
// }, {
// from: Date.UTC(2015, 01, 22),
// to: Date.UTC(2015, 05, 22),
// label: '门窗-厨房'
// }]
// }, {
// name: '收纳',
// intervals: [{ // From-To pairs
// from: Date.UTC(2013, 06, 17),
// to: Date.UTC(2014, 04, 21),
// label: '收纳-收取'
// }, {
// from: Date.UTC(2015, 01, 12),
// to: Date.UTC(2015, 05, 22),
// label: '收纳-坚信'
// }, {
// from: Date.UTC(2015, 06, 22),
// to: Date.UTC(2015, 07, 22),
// label: '收纳-甲醇'
// }]
// }];
// // re-structure the tasks into line seriesvar series = [];
// var series = [];
// $.each(tasks.reverse(), function (i, task) {
// var item = {
// name: task.name,
// data: []
// };
// $.each(task.intervals, function (j, interval) {
// item.data.push({
// x: interval.from,
// y: i,
// label: interval.label,
// from: interval.from,
// to: interval.to
// }, {
// x: interval.to,
// y: i,
// from: interval.from,
// to: interval.to
// });
// // add a null value between intervals
// if (task.intervals[j + 1]) {
// item.data.push(
// [(interval.to + task.intervals[j + 1].from) / 2, null]
// );
// }
// });
// series.push(item);
// });
// // create the chart
// var chart = new Highcharts.Chart({
// chart: {
// renderTo: 'container',
// },
// title: {
// text: ""
// },
// xAxis: {
// type: 'datetime'
// },
// yAxis: {
// categories: ['基层', '天花', '墙面', '地面', '门窗', '收纳'],
// tickInterval: 1,
// tickPixelInterval: 200,
// labels: {
// style: {
// color: '#525151',
// font: '5px Helvetica',
// fontWeight: 'bold'
// },
// /* formatter: function() {
// if (tasks[this.value]) {
// return tasks[this.value].name;
// }
// }*/
// },
// startOnTick: false,
// endOnTick: false,
// title: {
// text: ''
// },
// minPadding: 0.2,
// maxPadding: 0.2,
// fontSize: '5px'
// },
// legend: {
// enabled: true
// },
// tooltip: {
// formatter: function () {
// return '<b>' + tasks[this.y].name + '</b><br/>' +
// Highcharts.dateFormat('%m-%d-%Y', this.point.options.from) +
// ' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to);
// }
// },
// plotOptions: {
// line: {
// lineWidth: 10,
// marker: {
// enabled: true
// },
// dataLabels: {
// enabled: true,
// align: 'left',
// formatter: function () {
// return this.point.options && this.point.options.label;
// }
// }
// }
// },
// series: series
// });
//});
$(function () {
/**
* Highcharts X-range series plugin
*/
(function (H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
each = H.each;
defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {});
H.seriesTypes.xrange = H.extendClass(columnType, {
type: 'xrange',
parallelArrays: ['x', 'x2', 'y'],
animate: H.seriesTypes.line.prototype.animate,
/**
* Borrow the column series metrics, but with swapped axes. This gives free access
* to features like groupPadding, grouping, pointWidth etc.
*/
getColumnMetrics: function () {
var metrics,
chart = this.chart,
swapAxes = function () {
each(chart.series, function (s) {
var xAxis = s.xAxis;
s.xAxis = s.yAxis;
s.yAxis = xAxis;
});
};
swapAxes();
this.yAxis.closestPointRange = 1;
metrics = columnType.prototype.getColumnMetrics.call(this);
swapAxes();
return metrics;
},
translate: function () {
columnType.prototype.translate.apply(this, arguments);
var series = this,
xAxis = series.xAxis,
yAxis = series.yAxis,
metrics = series.columnMetrics;
H.each(series.points, function (point) {
barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
point.shapeArgs = {
x: point.plotX,
y: point.plotY + metrics.offset,
width: barWidth,
height: metrics.width
};
point.tooltipPos[0] += barWidth / 2;
point.tooltipPos[1] -= metrics.width / 2;
});
}
});
/**
* Max x2 should be considered in xAxis extremes
*/
H.wrap(H.Axis.prototype, 'getSeriesExtremes', function (proceed) {
var axis = this,
dataMax = Number.MIN_VALUE;
proceed.call(this);
if (this.isXAxis) {
each(this.series, function (series) {
each(series.x2Data || [], function (val) {
if (val > dataMax) {
dataMax = val;
}
});
});
if (dataMax > Number.MIN_VALUE) {
axis.dataMax = dataMax;
}
}
});
}(Highcharts));
var series = [{
data: [{
name: 'Catergory 1',
x: Date.UTC(2009, 3, 15),
x2: Date.UTC(2015, 5, 11),
y: 8,
tooltip_data: '',
color: '#f45b5b'
}, {
name: 'Catergory 2',
x: Date.UTC(2013, 10, 12),
x2: Date.UTC(2014, 6, 17),
y: 7,
tooltip_data: 'Catergory 2 A',
color: '#2b908f'
}, {
name: 'Catergory 2',
x: Date.UTC(2014, 6, 18),
x2: Date.UTC(2015, 5, 11),
y: 7,
tooltip_data: '',
color: '#2b908f'
},
{
name: 'Catergory 3',
x: Date.UTC(2008, 6, 21),
x2: Date.UTC(2015, 5, 11),
y: 6,
tooltip_data: '',
color: '#e4d354'
},
{
name: 'Catergory 3',
x: Date.UTC(2009, 6, 21),
x2: Date.UTC(2015, 5, 11),
y: 6,
tooltip_data: '',
color: '#e4d354'
}, {
name: 'Catergory 4',
x: Date.UTC(2011, 8, 29),
x2: Date.UTC(2015, 5, 11),
y: 5,
tooltip_data: '',
color: '#f15c80'
}, {
name: 'Catergory 7',
x: Date.UTC(2009, 3, 15),
x2: Date.UTC(2014, 6, 17),
y: 2,
tooltip_data: 'Tooltip Catergory 7 A',
color: '#90ed7d'
}, {
name: 'Catergory 7',
x: Date.UTC(2014, 6, 18),
x2: Date.UTC(2015, 5, 11),
y: 2,
tooltip_data: '',
color: '#90ed7d'
}, {
name: 'Catergory 8',
x: Date.UTC(2009, 6, 16),
x2: Date.UTC(2015, 5, 11),
y: 1,
tooltip_data: '',
color: '#434348'
}, {
name: 'Category 9',
x: Date.UTC(2009, 3, 15),
x2: Date.UTC(2015, 5, 11),
y: 0,
tooltip_data: '',
color: '#7cb5ec'
}]
}];
// THE CHART
$('#container').highcharts({
chart: {
type: 'xrange'
},
title: {
text: 'Category History',
style: {
color: '#525151',
font: '20px Helvetica',
fontWeight: 'bold'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b - %Y'
},
labels: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
},
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
}
},
startOnTick: true,
tickmarkPlacement: 'on',
tickInterval:30 * 24 * 3600 * 1000,
endOnTick: true,
minPadding: 0,
maxPadding: 0,
gridLineWidth: 1
},
yAxis: {
min: 0,
useHTML: true,
categories: ['Category 9',
'Category 8',
'Category 7',
'Category 6',
'Category 5',
'Category 4',
'Category 3',
'Category 2',
'Category 1'],
tickInterval: 1,
tickPixelInterval: 200,
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Criteria',
style: {
color: '#525151',
font: '15px Helvetica',
fontWeight: 'bold'
}
},
minPadding: 0.2,
maxPadding: 0.2,
tickLength: 0,
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.point.options.name + '</b><br/>' + this.point.options.tooltip_data + '<br>' +
Highcharts.dateFormat('%m-%d-%Y', this.point.options.x) +
' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.x2) + '<br>';
}
},
plotOptions: {
series: {
borderRadius: 5,
pointWidth: 10,
colorByPoint: true
}
},
series: series
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container" style="min-width: 400px; height: 400px"></div>
</form>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--#include file='/HTMLTemplate/HeaderTemplate.html'-->
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'container',
// inverted: true,//反转,
},
title: {
text: "工程图"
},
plotOptions: {
bar: {
maxPointWidth: 30,
//grouping: true,
//colorByPoint: true,
pointWidth: 8,
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 point.name + "：" + getDateDiff(date1, date2) + "天";
},
}
},
series: {
dataLabels: {
enabled: true,
color: 'red'
}
}
},
tooltip: {
borderWidth: 0,
shadow: false,
formatter: function () {
var point = this.point;
return '<b>' + point.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d', point.low) + ' 至 ' +
Highcharts.dateFormat('%Y-%m-%d', point.y);
}
},
legend: {
enabled: true,
},
credits: {
enabled: false
},
xAxis: {
tickLength: 0,
gridLineWidth: 1, //纵向网格线宽度
min: 0, max: 5,
minPadding: 0.2,
maxPadding: 0.2,
fontSize:'15px',
categories: ['', '', '', '', '', ''], //['基层', '天花', '墙面', '地面', '门窗', '收纳'],
},
yAxis: {
title: { text: null },
gridLineWidth: 1,//横向网格线宽度
tickInterval: (24 * 60 * 60 * 1000) * 15,
//tickPixelInterval: 150, //轴上的间隔
type: 'datetime',
min: Date.UTC(2016, 0),
max: Date.UTC(2016, 6, 30),
labels: {
rotation: 90,
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
},
},
series: [{
data: [{
name: "基层-甲醇",
low: Date.UTC(2016, 0, 10),
y: Date.UTC(2016, 2, 5)
}, {
name: "基层-甲醇B",
low: Date.UTC(2016, 2, 10),
y: Date.UTC(2016, 4, 5),
color: '#f15c80'
}]
}
/*, {
name: "天花",
data: [{
name: "甲醇",
low: Date.UTC(2016, 1, 1),
y: Date.UTC(2016, 2, 3)
}]
}, {
name: "天花",
data: [{
name: "甲醇",
low: Date.UTC(2016, 2, 1),
y: Date.UTC(2016, 3, 3)
}]
}, {
name: "天花",
data: [{
name: "甲醇",
low: Date.UTC(2016, 4, 1),
y: Date.UTC(2016, 5, 3)
}]
},*/
]
});
// //第二部分
// $('#containers').highcharts({
// chart: {
// type: 'columnrange',
// inverted: true
// },
// title: {
// text: 'Temperature variation by month'
// },
// xAxis: {
// min: 0, max: 5,
// categories: ['基层', '天花', '墙面', '地面', '门窗', '收纳'],
// },
// yAxis: {
// title: { text: null },
// gridLineWidth: 1,//横向网格线宽度
// tickInterval: (24 * 60 * 60 * 1000) * 7,
// 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);
// }
// },
// },
// tooltip: {
// borderWidth: 0,
// shadow: true,
// formatter: function () {
// var point = this.point;
// return '<b>' + point.category + '-' + point.name + '</b><br/>' +
// Highcharts.dateFormat('%Y-%m-%d', point.low) + ' 至 ' +
// Highcharts.dateFormat('%Y-%m-%d', point.high);
// }
// },
// plotOptions: {
// columnrange: {
// pointWidth: 8,
// 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.high)
// return this.x + '-' + point.name + "：" + getDateDiff(date1, date2) + "天";
// }
// }
// }
// },
// legend: {
// reversed: true,
// enabled: true
// },
// series: [{
// data: [
// { name: "基层", low: Date.UTC(2016, 1, 10), high: Date.UTC(2016, 2, 10) }
// //{ name: "基层", low: Date.UTC(2016, 0, 15), high: Date.UTC(2016, 3, 10) }
// //[Date.UTC(2016, 1, 10), Date.UTC(2016, 2, 10)],
// //[Date.UTC(2016, 0, 15), Date.UTC(2016, 3, 10)]
// ]
// }, {
// data: [
// { name: "天花", low: Date.UTC(2016, 1, 15), high: Date.UTC(2016, 2, 3) },
// { name: "天花", low: Date.UTC(2016, 0, 10), high: Date.UTC(2016, 3, 9) }
// // //[0, Date.UTC(2016, 1, 15), Date.UTC(2016, 2, 3)],
// // //[1, Date.UTC(2016, 0, 10), Date.UTC(2016, 3, 9)]
// ]
// }]
// });
});
//$(function () {
// // Define tasks
// var tasks = [
// {
// name: '基层',
// intervals: [{ // From-To pairs
// from: Date.UTC(2010, 5, 21),
// to: Date.UTC(2015, 5, 21),
// label: '基层-甲醇'
// }]
// }, {
// name: '天花',
// intervals: [{ // From-To pairs
// from: Date.UTC(2010, 5, 21),
// to: Date.UTC(2010, 5, 21),
// label: '天花-木板'
// }]
// }, {
// name: '墙面',
// intervals: [{ // From-To pairs
// from: Date.UTC(2011, 05, 16),
// to: Date.UTC(2012, 03, 21),
// label: '墙面-服饰'
// }, {
// from: Date.UTC(2013, 07, 09),
// to: Date.UTC(2015, 05, 22),
// label: '墙面-装饰'
// }]
// }, {
// name: '地面',
// intervals: [{ // From-To pairs
// from: Date.UTC(2013, 07, 18),
// to: Date.UTC(2015, 05, 22),
// label: '地面-前面'
// }]
// }, {
// name: '门窗',
// intervals: [{ // From-To pairs
// from: Date.UTC(2013, 06, 17),
// to: Date.UTC(2014, 04, 21),
// label: '门窗-窗帘'
// }, {
// from: Date.UTC(2015, 01, 22),
// to: Date.UTC(2015, 05, 22),
// label: '门窗-厨房'
// }]
// }, {
// name: '收纳',
// intervals: [{ // From-To pairs
// from: Date.UTC(2013, 06, 17),
// to: Date.UTC(2014, 04, 21),
// label: '收纳-收取'
// }, {
// from: Date.UTC(2015, 01, 12),
// to: Date.UTC(2015, 05, 22),
// label: '收纳-坚信'
// }, {
// from: Date.UTC(2015, 06, 22),
// to: Date.UTC(2015, 07, 22),
// label: '收纳-甲醇'
// }]
// }];
// // re-structure the tasks into line seriesvar series = [];
// var series = [];
// $.each(tasks.reverse(), function (i, task) {
// var item = {
// name: task.name,
// data: []
// };
// $.each(task.intervals, function (j, interval) {
// item.data.push({
// x: interval.from,
// y: i,
// label: interval.label,
// from: interval.from,
// to: interval.to
// }, {
// x: interval.to,
// y: i,
// from: interval.from,
// to: interval.to
// });
// // add a null value between intervals
// if (task.intervals[j + 1]) {
// item.data.push(
// [(interval.to + task.intervals[j + 1].from) / 2, null]
// );
// }
// });
// series.push(item);
// });
// // create the chart
// var chart = new Highcharts.Chart({
// chart: {
// renderTo: 'container',
// },
// title: {
// text: ""
// },
// xAxis: {
// type: 'datetime'
// },
// yAxis: {
// categories: ['基层', '天花', '墙面', '地面', '门窗', '收纳'],
// tickInterval: 1,
// tickPixelInterval: 200,
// labels: {
// style: {
// color: '#525151',
// font: '5px Helvetica',
// fontWeight: 'bold'
// },
// /* formatter: function() {
// if (tasks[this.value]) {
// return tasks[this.value].name;
// }
// }*/
// },
// startOnTick: false,
// endOnTick: false,
// title: {
// text: ''
// },
// minPadding: 0.2,
// maxPadding: 0.2,
// fontSize: '5px'
// },
// legend: {
// enabled: true
// },
// tooltip: {
// formatter: function () {
// return '<b>' + tasks[this.y].name + '</b><br/>' +
// Highcharts.dateFormat('%m-%d-%Y', this.point.options.from) +
// ' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to);
// }
// },
// plotOptions: {
// line: {
// lineWidth: 10,
// marker: {
// enabled: true
// },
// dataLabels: {
// enabled: true,
// align: 'left',
// formatter: function () {
// return this.point.options && this.point.options.label;
// }
// }
// }
// },
// series: series
// });
//});
$(function () {
/**
* Highcharts X-range series plugin
*/
(function (H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
each = H.each;
defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {});
H.seriesTypes.xrange = H.extendClass(columnType, {
type: 'xrange',
parallelArrays: ['x', 'x2', 'y'],
animate: H.seriesTypes.line.prototype.animate,
/**
* Borrow the column series metrics, but with swapped axes. This gives free access
* to features like groupPadding, grouping, pointWidth etc.
*/
getColumnMetrics: function () {
var metrics,
chart = this.chart,
swapAxes = function () {
each(chart.series, function (s) {
var xAxis = s.xAxis;
s.xAxis = s.yAxis;
s.yAxis = xAxis;
});
};
swapAxes();
this.yAxis.closestPointRange = 1;
metrics = columnType.prototype.getColumnMetrics.call(this);
swapAxes();
return metrics;
},
translate: function () {
columnType.prototype.translate.apply(this, arguments);
var series = this,
xAxis = series.xAxis,
yAxis = series.yAxis,
metrics = series.columnMetrics;
H.each(series.points, function (point) {
barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
point.shapeArgs = {
x: point.plotX,
y: point.plotY + metrics.offset,
width: barWidth,
height: metrics.width
};
point.tooltipPos[0] += barWidth / 2;
point.tooltipPos[1] -= metrics.width / 2;
});
}
});
/**
* Max x2 should be considered in xAxis extremes
*/
H.wrap(H.Axis.prototype, 'getSeriesExtremes', function (proceed) {
var axis = this,
dataMax = Number.MIN_VALUE;
proceed.call(this);
if (this.isXAxis) {
each(this.series, function (series) {
each(series.x2Data || [], function (val) {
if (val > dataMax) {
dataMax = val;
}
});
});
if (dataMax > Number.MIN_VALUE) {
axis.dataMax = dataMax;
}
}
});
}(Highcharts));
var series = [{
data: [{
name: 'Catergory 1',
x: Date.UTC(2009, 3, 15),
x2: Date.UTC(2015, 5, 11),
y: 8,
tooltip_data: '',
color: '#f45b5b'
}, {
name: 'Catergory 2',
x: Date.UTC(2013, 10, 12),
x2: Date.UTC(2014, 6, 17),
y: 7,
tooltip_data: 'Catergory 2 A',
color: '#2b908f'
}, {
name: 'Catergory 2',
x: Date.UTC(2014, 6, 18),
x2: Date.UTC(2015, 5, 11),
y: 7,
tooltip_data: '',
color: '#2b908f'
},
{
name: 'Catergory 3',
x: Date.UTC(2008, 6, 21),
x2: Date.UTC(2015, 5, 11),
y: 6,
tooltip_data: '',
color: '#e4d354'
},
{
name: 'Catergory 3',
x: Date.UTC(2009, 6, 21),
x2: Date.UTC(2015, 5, 11),
y: 6,
tooltip_data: '',
color: '#e4d354'
}, {
name: 'Catergory 4',
x: Date.UTC(2011, 8, 29),
x2: Date.UTC(2015, 5, 11),
y: 5,
tooltip_data: '',
color: '#f15c80'
}, {
name: 'Catergory 7',
x: Date.UTC(2009, 3, 15),
x2: Date.UTC(2014, 6, 17),
y: 2,
tooltip_data: 'Tooltip Catergory 7 A',
color: '#90ed7d'
}, {
name: 'Catergory 7',
x: Date.UTC(2014, 6, 18),
x2: Date.UTC(2015, 5, 11),
y: 2,
tooltip_data: '',
color: '#90ed7d'
}, {
name: 'Catergory 8',
x: Date.UTC(2009, 6, 16),
x2: Date.UTC(2015, 5, 11),
y: 1,
tooltip_data: '',
color: '#434348'
}, {
name: 'Category 9',
x: Date.UTC(2009, 3, 15),
x2: Date.UTC(2015, 5, 11),
y: 0,
tooltip_data: '',
color: '#7cb5ec'
}]
}];
// THE CHART
$('#container').highcharts({
chart: {
type: 'xrange'
},
title: {
text: 'Category History',
style: {
color: '#525151',
font: '20px Helvetica',
fontWeight: 'bold'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b - %Y'
},
labels: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
},
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
}
},
startOnTick: true,
tickmarkPlacement: 'on',
tickInterval:30 * 24 * 3600 * 1000,
endOnTick: true,
minPadding: 0,
maxPadding: 0,
gridLineWidth: 1
},
yAxis: {
min: 0,
useHTML: true,
categories: ['Category 9',
'Category 8',
'Category 7',
'Category 6',
'Category 5',
'Category 4',
'Category 3',
'Category 2',
'Category 1'],
tickInterval: 1,
tickPixelInterval: 200,
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Criteria',
style: {
color: '#525151',
font: '15px Helvetica',
fontWeight: 'bold'
}
},
minPadding: 0.2,
maxPadding: 0.2,
tickLength: 0,
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.point.options.name + '</b><br/>' + this.point.options.tooltip_data + '<br>' +
Highcharts.dateFormat('%m-%d-%Y', this.point.options.x) +
' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.x2) + '<br>';
}
},
plotOptions: {
series: {
borderRadius: 5,
pointWidth: 10,
colorByPoint: true
}
},
series: series
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container" style="min-width: 400px; height: 400px"></div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 虚函数表
- SQL中text字段如何作为判断条件
- 猫屎咖啡 残忍
- PNChart简单学习
- 通常环境光照度参照表
- Spring @Conditional注解的使用
- python 基本语法
- Linux之线程：控制与分离
- 多线程并发编程（三）：多线程同步互斥Synchronized
- django--学习错误集锦一
- const char * char * const
- Qt 控件
- 图像预处理第3步：梯度锐化
- 宏碁4743G+固态硬盘（SSD）+机械硬盘(HHD)混合用
- 信息流造就阿里 物流造就京东
- Kesci“魔镜杯”风控算法大赛复赛解决方案
- C#-using用法详解
- Java的线程模型
- Java-单机版的书店管理系统(练习设计模块和思想_系列 七 )
- ios开发-- 开发细节（代理传值）