在highstock 1.3.1中，当图例向右对齐时，用于绘制图表的区域与范围选择器使用的区域重叠。因此，用于移动范围选择器的鼠标单击和拖动事件会触发图表区域的缩放事件。但是，如果图例与默认位置对齐，则图表行为正确。 演示： http://jsfiddle.net/msjaiswal/eexBp/3/
上述小提琴的代码：
HTML：
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
Try using the range selectorin the two charts below.<br>
<b>Erroneous behavior:</b>
<div id="container" style="height: 500px; min-width: 500px"></div>
<b>Correct behavior:</b>
<div id="container2" style="height: 500px; min-width: 500px"></div>
Javascript：
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
type: 'line',
zoomType : 'x'
},
rangeSelector: {
selected: 1
},
title: {
text: 'USD to EUR exchange rate'
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
// verticalAlign: 'top',
x: -10,
y: -200,
borderWidth: 0
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
tooltip: {
valueDecimals: 4
}
}, {
type: 'flags',
name: 'Flags on series',
data: [{
x: Date.UTC(2011, 1, 14),
title: 'On series'
}, {
x: Date.UTC(2011, 3, 28),
title: 'On series'
}],
onSeries: 'dataseries',
shape: 'squarepin'
}, {
type: 'flags',
name: 'Flags on axis',
data: [{
x: Date.UTC(2011, 2, 1),
title: 'On axis'
}, {
x: Date.UTC(2011, 3, 1),
title: 'On axis'
}],
shape: 'squarepin'
}]
});
});
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {
// Create the chart
$('#container2').highcharts('StockChart', {
chart: {
type: 'line',
zoomType : 'x'
},
rangeSelector: {
selected: 1
},
title: {
text: 'USD to EUR exchange rate'
},
legend: {
enabled: true,
layout: 'vertical',
//align: 'right',
//x: -10,
//y: -200,
borderWidth: 0
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
tooltip: {
valueDecimals: 4
}
}, {
type: 'flags',
name: 'Flags on series',
data: [{
x: Date.UTC(2011, 1, 14),
title: 'On series'
}, {
x: Date.UTC(2011, 3, 28),
title: 'On series'
}],
onSeries: 'dataseries',
shape: 'squarepin'
}, {
type: 'flags',
name: 'Flags on axis',
data: [{
x: Date.UTC(2011, 2, 1),
title: 'On axis'
}, {
x: Date.UTC(2011, 3, 1),
title: 'On axis'
}],
shape: 'squarepin'
}]
});
});