如何在高图中切换图例布局

我有兴趣在点击事件上更改图例布局，如下所示

第一次单击水平 – 底部

第二次单击水平顶部

第3次点击virtical left

第四次点击美德

这是 FIDDLE的链接

我不知道如何做到这一点，这是我迄今为止所尝试过的。

HTML

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/