Highcharts change legend options dynamically

问题:

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?

回答1:

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/