如何在Highchart中切換圖例布局

Question

我有興趣更改點擊事件的圖例布局，如下所示

第一次單擊水平-底部

第二次單擊水平頂部

第三次單擊病毒左

第四單擊病毒右鍵

這是 鏈接到FIDDLE

我不知道該怎么做，這是我到目前為止所嘗試的。

的HTML

      <script src="http://code.highcharts.com/highcharts.js"></script>
      <div id="container" style="height: 400px"></div>
      <input id='legend' type='button' value='toggle legend'>

JAVASCRIPT

       $(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        zoomType: 'xy',
        marginLeft: 50,
        marginBottom: 90
    },

    yAxis: {
        reversed: true,
        //min: 0,
        //max: 50
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    xAxis: {
        opposite: true  
    },
    series: [{
        name: '01-Jan-2014',
        data: [
            [28, 10],
            [30, 0]
        ]
    }]
});


var last = 0;
$('#legend').click(function(){

     var arr  = ['vertical','horizontal'];
     if(last>arr.length){last=0;}
    setTimeout(function() { alert(arr[last++]);},10);  
     chart.series[0].update({ legend: { layout: arr[last] }});

    });

    });

Answer 1

這是在這里做的一種方法。 我討厭訴諸於設置內部dirty標志，但似乎效果很好：

var somePositions = [['center','bottom'],
                     ['center','top'],
                     ['left','middle'],
                     ['right','middle']];

 $('#btn').click(function(){
      posIdx++;
      if (posIdx == 4) posIdx = 0;                
      chart.legend.options.align = somePositions[posIdx][0];
      chart.legend.options.verticalAlign = somePositions[posIdx][1];
      chart.isDirtyLegend = true;
      chart.isDirtyBox = true;
      chart.redraw();
 });

Answer 2

您需要使用tranlsate（）函數，該函數允許移動諸如圖例之類的SVG元素。

var legend = chart.legend.group;

        $('#btn').click(function(){
            legend.translate(0,0)
        });

http://jsfiddle.net/F3cSa/1/