$(function() {
var flows = [
{
name: '央行行长',
intervals: [
{ // From-To pairs
from: Date.UTC(1979,0,0),
to: Date.UTC(1983,0,0),
name: '李葆华',
color: '#BF0B23'
},
{ // From-To pairs
from: Date.UTC(1986,0,0),
to: Date.UTC(1989,0,0),
name: '陈慕华'
},
{ // From-To pairs
from: Date.UTC(1994,0,0),
to: Date.UTC(1996,0,0),
name: '朱镕基'
},
{ // From-To pairs
from: Date.UTC(2003,0,0),
to: Date.UTC(2014,0,0),
name: '周小川'
}
]
},
{
intervals: [
{ // From-To pairs
from: Date.UTC(1983,0,0),
to: Date.UTC(1986,0,0),
name: '吕培俭'
},
{ // From-To pairs
from: Date.UTC(1989,0,0),
to: Date.UTC(1994,0,0),
name: '李贵鲜'
},
{ // From-To pairs
from: Date.UTC(1996,0,0),
to: Date.UTC(2003,0,0),
name: '戴相龙'
},
]
},
{
name: '财政部长',
intervals: [
{ // From-To pairs
from: Date.UTC(1976,0,0),
to: Date.UTC(1980,0,0),
name: '张劲夫'
},
{ // From-To pairs
from: Date.UTC(1981,0,0),
to: Date.UTC(1993,0,0),
name: '王丙乾'
},
{ // From-To pairs
from: Date.UTC(1999,0,0),
to: Date.UTC(2004,0,0),
name: '项怀诚'
},
{ // From-To pairs
from: Date.UTC(2004,0,0),
to: Date.UTC(2008,0,0),
name: '金人庆'
}
]
},
{
intervals: [
{ // From-To pairs
from: Date.UTC(1980,0,0),
to: Date.UTC(1981,0,0),
name: '吴波'
},
{ // From-To pairs
from: Date.UTC(1993,0,0),
to: Date.UTC(1999,0,0),
name: '刘仲藜'
},
{ // From-To pairs
from: Date.UTC(2008,0,0),
to: Date.UTC(2014,0,0),
name: '谢旭人'
}
]
},
{
name: '国家总理',
intervals: [
{ // From-To pairs
from: Date.UTC(1977,0,0),
to: Date.UTC(1981,0,0),
name: '华国锋'
},
{ // From-To pairs
from: Date.UTC(1988,0,0),
to: Date.UTC(1999,0,0),
name: '李鹏'
},
{ // From-To pairs
from: Date.UTC(2004,0,0),
to: Date.UTC(2014,0,0),
name: '温家宝'
}
]
},
{
intervals: [
{ // From-To pairs
from: Date.UTC(1981,0,0),
to: Date.UTC(1988,0,0),
name: '赵紫阳'
},
{ // From-To pairs
from: Date.UTC(1999,0,0),
to: Date.UTC(2004,0,0),
name: '朱镕基'
}
]
}
];
// re-structure the flows into line seriesvar series = [];
var series = [];
$.each(flows.reverse(), function(i, flow) {
var item = {
name: flow.name,
data: []
};
$.each(flow.intervals, function(j, interval) {
item.data.push({
x: interval.from,
y: i,
name: interval.name,
label: interval.label,
from: interval.from,
to: interval.to
}, {
x: interval.to,
y: i,
name: interval.name,
from: interval.from,
to: interval.to
});
// add a null value between intervals
if (flow.intervals[j + 1]) {
item.data.push(
[(interval.to + flow.intervals[j + 1].from) / 2, null]
);
}
});
series.push(item);
});
// create the chart
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container2',
height: 250
},
title: {
text: ''
},
credits: {
enabled: false
},
legend: {
enabled: false
},
exporting: {
enabled: false,
},
xAxis: {
type: 'datetime',
opposite: true,
gridLineColor: 'none',
gridLineWidth: 0,
lineWidth: 0,
tickLength: 0,
labels: {
enabled: false
}
},
yAxis: {
lineWidth: 0,
tickLength: 0,
tickInterval: 1,
gridLineColor: 'none',
gridLineWidth: 0,
labels: {
formatter: function() {
if (flows[this.value]) {
return flows[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
title: {
enabled: false
},
plotBands: {
color: 'rgba(68, 170, 213, 0.1)',
from: 1.5,
to: 3.5
},
minPadding: 0.2,
maxPadding: 0.2
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.options.name + '</b><br/>' +
Highcharts.dateFormat('%Y', this.point.options.from) +
' - ' + Highcharts.dateFormat('%Y', this.point.options.to);
}
},
plotOptions: {
line: {
lineWidth: 15,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});
});
});
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://news.qq.com/interactive/js/highcharts/themes/flat.js"></script>
<div id="container2">