javascript - HighCharts 动态调整渲染器标签或元素的大小

Question

我需要在我的图表中添加大量脚注，并且它们必须使用 svg 导出，所以我不能简单地将它们放在周围的 HTML 中。

我尝试了几种策略，我可以定位它、换行文本、操纵图表的大小以腾出空间等。

目的是让它们响应。问题是我无法找到如何使用事件和渲染器元素或使用 chart.labels 来更新包含此文本的容器的大小

在这个 fiddle 中(除其他外):我试图在每次重绘时创建一个新标签，但我找不到如何处理和销毁我使用 onload 创建的标签

http://jsfiddle.net/alex_at_pew/qswnw4wz/2/

$(function () {
function foo() { var width = $(this.container).width()-250; return width;}
var footnote_text = 'This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing ';
$('#container').highcharts({

    chart: {
        events: {


            load: function () {
                var label = this.renderer.label(footnote_text, //str
                        10, //x
                        200,//y
                        'rect',//shape
                        1,//anchorX
                        1,//anchorY
                        1,//useHTML
                        1,//baseline
                        'deletme'//className
                    )
                    .css({
                    width: foo() + 'px'

                }).add();

            },
            redraw: function () {
            $('.highcharts-deletme').remove();
               console.log('chart');
                var label = this.renderer.label(footnote_text, //str
                        10, //x
                        200,//y
                        'rect',//shape
                        1,//anchorX
                        1,//anchorY
                        1,//useHTML
                        1,//baseline
                        'deletme'//className
                    )
                    .css({
                    width: foo() + 'px'

                }).add();
            }
        }
    },
    labels: {

        items: [{
            html:  foo()+footnote_text
        }],
        style: {
            left: '100px',
            top: '100px',
            color: 'red',
            width: foo()
        }
    },series: [{
       data: [29.9, 71.5]     
       }]

    });
});

Answer 1

另一种(也是通用的)解决方案是将生成的标签存储在变量中:

var myLabel; // define label
$('#container').highcharts({
    chart: {
       events: {
          load: function () {
              myLabel = this.renderer.label( ... ).add();
          },
          redraw: function () {
              if(myLabel) {
                    myLabel.destroy();
              }
              myLabel = this.renderer.label( ... ).add();
          }
       }
    }
});

它会比使用 jQuery 按类查找元素更快。