高图表动态更改图例选项

Highcharts change legend options dynamically

本文关键字：选项 动态 高图表      更新时间：2023-09-26

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

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：居中，verticalAlign：底部，布局：水平，边框宽度：0，阴影：假

我已经尝试了下面的代码。（尝试直接更改图例并使用选项变量和更新）

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

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

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

这里是jsfiddle的例子，它可以去除阴影，你也可以添加其他选项。

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

http://jsfiddle.net/43ur8xyq/

相关文章：