Question

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

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

目的是让他们做出回应。问题是我无法使用事件和渲染器元素或使用chart.labels来更新保存此文本的容器的大小

在这个小提琴中（除其他外）：我试图用每次重绘创建一个新标签，但我找不到如何处理和销毁我用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按类查找项目会更快。

Answer 2

原来高图允许你在标签上添加一个类。

var label = this.renderer.label(
     footnote_text, //str
     10,  //x
     200, //y
     'rect', //shape
     1, //anchorX
     1, //anchorY
     1, //useHTML
     1, //baseline
     'deleteme' //className
)

我添加了一个类名deleteme，然后使用jQuery删除它：

$('.highcharts-deletme').remove();

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

2 个答案: