以相同的xAxis高位图显示两个不同的开始间隔的系列 [英] show two different series with different start intervals with the same xAxis highcharts
本文介绍了以相同的xAxis高位图显示两个不同的开始间隔的系列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
http://jsbin.com/enotab/39/edit 我想展示数据从同一个XAxis上的2个不同年份开始，而不使用2个轴。在这种情况下，我得到以下结果
http://jsbin.com/enotab/39/editI want to show data from 2 different years on the same XAxis without using 2 x axes. In which case i get the following result
我想要在2012系列变成阴影图时使用2系列的覆盖图。这怎么可能？这是我的静态代码：
I want to have an overlay graph with the 2 series where 2012 series becomes a shadow graph. How is it possible? this is my static code:
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]
]
}]
});
});
推荐答案
这取决于您想要在x轴上显示的内容。如果您只想保留第一个轴标签，那么只需从第二个x轴上移除标签并将其偏移到第一个轴上即可：
It depends on what you want shown on the x axis. If you just want to keep the first axis labels, then simply remove the labels from the second x axis and offset it over the first:
xAxis:[ {type: 'datetime', minRange:31*24 *3600000 , offset:10,
labels: {formatter: function() {return Highcharts.dateFormat('%e %b', this.value);
}
} },
{type: 'datetime', minRange:31*24 *3600000 , offset:10,
labels: {enabled:false}
}],
这篇关于以相同的xAxis高位图显示两个不同的开始间隔的系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
