Highcharts 当图例向右对齐时，Highstock（Highchart）1.3.1的行为错误

在highstock 1.3.1中，当图例向右对齐时，用于绘制图表的区域与范围选择器使用的区域重叠。因此，用于移动范围选择器的鼠标点击和拖动事件会触发图表区域的缩放事件。但如果图例与默认位置对齐，图表的行为将正确。 演示：

上述小提琴的代码：

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>

---

我想您需要设置垂直对齐：中间，请参见：

$(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'
        }]
    });
});