http://jsbin.com/enotab/39/edit 2つのx軸を使用せずに、同じXAxisで2つの異なる年のデータを表示したいと思います。その場合、次の結果が得られます
2012シリーズがシャドーグラフになる2シリーズのオーバーレイグラフが欲しいです。どうしてそれは可能ですか?これは私の静的コードです:
var mychart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
title: {
text: 'Chart Title'
},
xAxis: [{
type: 'datetime',
minRange: 31 * 24 * 3600000,
labels: {
formatter: function () {
return Highcharts.dateFormat('%e %b %y', this.value);
}
}
}],
yAxis: {
title: {
text: 'Current Values'
},
gridLineColor: 'transparent',
plotLines: [{
value: 0,
color: 'green',
dashStyle: 'longdashdot',
width: 1
}, {
value: 30,
color: 'orange',
dashStyle: 'longdashdot',
width: 1
}, {
value: 60,
color: 'red',
dashStyle: 'longdashdot',
width: 1
}, {
value: 80,
color: 'black',
dashStyle: 'longdashdot',
width: 1
}]
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
series: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0.1)']
]
},
lineWidth: 1,
shadow: false,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5,
fillColor: 'red'
}
}
},
states: {
hover: {
lineWidth: 1
}
},
threshold: null
} //area
}, //plotoptions
series: [{
type: 'area',
//color:'#89a54e',
color: '#4572a7',
lineWidth: 0.1,
name: '2012',
// xAxis: 0,
zIndex: -1,
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2013, 0, 1),
data: [
[Date.UTC(2013, 0, 1), 3],
[Date.UTC(2013, 0, 2), 12],
[Date.UTC(2013, 0, 3), 30],
[Date.UTC(2013, 0, 4), 22],
[Date.UTC(2013, 0, 5), 12],
[Date.UTC(2013, 0, 8), 13],
[Date.UTC(2013, 0, 9), 12],
[Date.UTC(2013, 0, 11), 13],
[Date.UTC(2013, 0, 12), 22],
[Date.UTC(2013, 0, 15), 1],
[Date.UTC(2013, 0, 16), 25],
[Date.UTC(2013, 0, 18), 43],
[Date.UTC(2013, 0, 19), 26],
[Date.UTC(2013, 0, 20), 23],
[Date.UTC(2013, 0, 21), 12],
[Date.UTC(2013, 0, 22), 13],
[Date.UTC(2013, 0, 23), 22],
[Date.UTC(2013, 0, 24), 1],
[Date.UTC(2013, 0, 25), 25],
[Date.UTC(2013, 0, 26), 43],
[Date.UTC(2013, 0, 27), 26],
[Date.UTC(2013, 0, 28), 23],
[Date.UTC(2013, 0, 29), 12],
[Date.UTC(2013, 0, 30), 13],
[Date.UTC(2013, 0, 31), 22],
[Date.UTC(2013, 1, 1), 1],
[Date.UTC(2013, 1, 2), -5],
[Date.UTC(2013, 1, 3), 43],
[Date.UTC(2013, 1, 4), 26],
[Date.UTC(2013, 1, 5), 23],
[Date.UTC(2013, 1, 6), 25],
[Date.UTC(2013, 1, 7), 43],
[Date.UTC(2013, 1, 8), 26],
[Date.UTC(2013, 1, 9), 23],
[Date.UTC(2013, 1, 10), 35],
[Date.UTC(2013, 1, 11), 38],
[Date.UTC(2013, 1, 14), 36],
[Date.UTC(2013, 1, 15), 3],
[Date.UTC(2013, 1, 16), 55],
[Date.UTC(2013, 1, 17), 43],
[Date.UTC(2013, 1, 18), 22],
[Date.UTC(2013, 1, 19), -3]
]
}, {
type: 'line',
name: '2013',
color: '#89a54e',
lineWidth: 3,
zIndex: 3,
// xAxis:1,
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2012, 0, 1),
data: [
[Date.UTC(2012, 0, 1), 13],
[Date.UTC(2012, 0, 2), 52],
[Date.UTC(2012, 0, 3), 3],
[Date.UTC(2012, 0, 4), 12],
[Date.UTC(2012, 0, 5), 2],
[Date.UTC(2012, 0, 6), 35],
[Date.UTC(2012, 0, 7), 12],
[Date.UTC(2012, 0, 8), 35],
[Date.UTC(2012, 0, 9), 22],
[Date.UTC(2012, 0, 11), 3],
[Date.UTC(2012, 0, 12), 32],
[Date.UTC(2012, 0, 15), 41],
[Date.UTC(2012, 0, 16), 45],
[Date.UTC(2012, 0, 18), 63],
[Date.UTC(2012, 0, 19), 16],
[Date.UTC(2012, 0, 20), 83],
[Date.UTC(2012, 0, 21), 1],
[Date.UTC(2012, 0, 22), 75],
[Date.UTC(2012, 0, 23), 52],
[Date.UTC(2012, 0, 24), 1],
[Date.UTC(2012, 0, 25), 65],
[Date.UTC(2012, 0, 26), 13],
[Date.UTC(2012, 0, 27), 76],
[Date.UTC(2012, 0, 28), 56],
[Date.UTC(2012, 0, 29), 12],
[Date.UTC(2012, 0, 30), 13],
[Date.UTC(2012, 0, 31), 22],
[Date.UTC(2012, 1, 1), 1],
[Date.UTC(2012, 1, 2), 25],
[Date.UTC(2012, 1, 3), 43],
[Date.UTC(2012, 1, 4), 26],
[Date.UTC(2012, 1, 5), 23],
[Date.UTC(2012, 1, 6), 25],
[Date.UTC(2012, 1, 7), 43],
[Date.UTC(2012, 1, 8), 26],
[Date.UTC(2012, 1, 9), 23],
[Date.UTC(2012, 1, 10), 35],
[Date.UTC(2012, 1, 11), 48],
[Date.UTC(2012, 1, 14), 86],
[Date.UTC(2012, 1, 15), 73],
[Date.UTC(2012, 1, 16), 55],
[Date.UTC(2012, 1, 17), 43],
[Date.UTC(2012, 1, 18), 22],
[Date.UTC(2012, 1, 19), -3]
]
}]
});
});