Highcharts动态更改图例选项 [英] Highcharts change legend options dynamically

问题描述

初始选项（这是垂直可拖动的图例）：

  id：'<？= $ id？>' ，
 layout：'vertical'，
 backgroundColor：'white'，
 align：'right'，
 verticalAlign：'top'，
y：legendY，
x：legendX，
 borderWidth：1，
 borderRadius：0，
 title：{
 text：'::'
}，
 floating： true，
 draggable：true 
  

我想让图例看起来像 http://jsfiddle.net/yqypj4qr/ 。
我实际上想要
align：center，verticalAlign：bottom，layout：horizo​​ntal，borderwidth：0，shadow：false

我试过了代码如下。 （直接尝试更改图例并使用options variable和update）

  var opt = chart.legend.options; 
 chart.legend.title.attr（{
 text：null
}）; //这个工程
 chart.legend.title = null; 
 chart.legend.draggable = false; 
 opt.draggable = false; 
 opt.align =center; 
 chart.legend.borderWidth = 0; 
 opt.borderWidth = 0; 
 chart.legend.floating = false; 
 opt.floating = false; 
 chart.legend.shadow = false; 
 opt.shadow = false; 
 opt.x = 0; 
 opt.y = 0; 
 opt.layout =horizo​​ntal; 
 opt.verticalAlign =bottom; 
 for（var i = 0; i< chart.series.length; i ++）{
 chart.series [i] .update（opt）; 
} 
 
 chart.isDirtyLegend = true; 
 chart.isDirtyBox = true; 
 chart.redraw（）; 
 chart.legend.render（）; 
  

如何将可拖动图例转换为默认图例？

解决方案

如果您想更改图表选项，您必须销毁旧图表并创建新图表;

这里是jsfiddle

  var c = $（'＃container'）。例如，删除阴影的示例，您也可以添加其他选项。 highcharts（）; 
 var o = c.options; 
 o.legend.shadow = false; 
 c = new Highcharts.Chart（o）; 
  

http://jsfiddle.net/43ur8xyq/

Initial Options (This is vertical draggable legend):

id : '<?=$id?>',
layout: 'vertical',
backgroundColor: 'white',
align: 'right',
verticalAlign: 'top',
y: legendY,
x: legendX,
borderWidth: 1,
borderRadius: 0,
title: {
   text: '::'
},
floating: true,
draggable: true

I want to make legend look like http://jsfiddle.net/yqypj4qr/. I actually want, align: center, verticalAlign: bottom, layout: horizontal, borderwidth:0, shadow:false

I have tried the code below. (tried both change legend directly and use options variable and update)

var opt = chart.legend.options;
chart.legend.title.attr({
    text: "null"
}); // this works
chart.legend.title = null;
chart.legend.draggable = false;
opt.draggable = false;
opt.align = "center";
chart.legend.borderWidth = 0;
opt.borderWidth = 0;
chart.legend.floating = false;
opt.floating = false;
chart.legend.shadow = false;
opt.shadow=false;
opt.x = 0;
opt.y = 0;
opt.layout = "horizontal";
opt.verticalAlign = "bottom";
for (var i=0; i<chart.series.length; i++) {
    chart.series[i].update(opt);
}

chart.isDirtyLegend = true;
chart.isDirtyBox = true;
chart.redraw();
chart.legend.render();

How can convert draggable legend to default legend?

解决方案

if you want to change chart options,you have to destroy old chart and create new one;

here is jsfiddle example which removes shadow,you can add other options to it,too.

var c = $('#container').highcharts();
    var o = c.options;
    o.legend.shadow = false; 
    c  = new Highcharts.Chart(o);

http://jsfiddle.net/43ur8xyq/

这篇关于Highcharts动态更改图例选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！