如何在高图中切换图例布局 [英] How to toggle legend layout in highchart

问题描述

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

1st 点击横向 - 底部

第二点击横向顶部

第三
$ b

4th 单击virtical right

链接到FIDDLE

我不知道这是怎么完成的，这个是我到目前为止所尝试过的。

HTML

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

JAVASCRIPT
< pre $ lt; code> $（function（）{
var chart = new Highcharts.Chart（{
chart：{
renderTo：'container'，
zoomType：'xy'，
marginLeft：50，
marginBottom：90
}，

yAxis：{
颠倒：true，
// min：0，
// max：50
}，
plotOptions：{
系列：{
堆栈：'正常'
}
}，
xAxis：{
相反：true
}，
系列：[{
name：'01 -Jan-2014'，
data：[
[28，10]，
[30，0]
]
}]
}）;


var last = 0;
$（'＃legend'）。click（function（）{

var arr = ['vertical'，'horizo​​ntal'];
if（last> arr.length）{last = 0;}
setTimeout（function（）{alert（arr [last ++]）;}，10）;
chart.series [0] .update（{legend：{layout：arr [last]}}）;

}）;

}）;

解决方案

这是一种方法这里。我讨厌诉诸设置内部脏标志，但它似乎运作良好：

  var somePositions = [['center'，'bottom']，
 ['center'，'top']，
 ['left'，'middle']，
 [ '右'， '中间']]; 
 $ b $（'＃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（）; 
}）; 
  

I am interested to change legend layout on click event as below

1st click horizontal - bottom

2nd click horizontal top

3rd click virtical left

4th click virtical right

Here is Link to FIDDLE

I don't know how this can be done, this is what I have tried so far.

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

    });

    });

解决方案

Here's a way to do it here. I hate resorting to setting the internal dirty flags but it seems to work well:

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

这篇关于如何在高图中切换图例布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！