Javascript 如何将文字添加到Highchart的底部，但在图例上方？

我想在Highchart下面添加一些文本或图像，但它必须出现在Highchart图例上方

我的代码：

$(function () {
    Highcharts.wrap(Highcharts.seriesTypes.bubble.prototype, 'drawPoints', function (proceed) {
        proceed.apply(this);
        for (i in this.data) {
            if(this.data[i].options.x > 90)
            this.data[i].graphic.dashstyleSetter(this.options.dashStyle || 'solid');
        }
    });

    $('#container').highcharts({

        chart: {
            type: 'bubble',
            zoomType: 'xy'
        },

        title: {
            text: 'Highcharts Bubbles'
        },

        series: [{
            dashStyle: 'dash',
            data: [
                [97, 36, 79],
                [94, 74, 60],
                [68, 76, 58],
                [64, 87, 56],
                [68, 27, 73],
                [74, 99, 42],
                [7, 93, 87],
                [51, 69, 40],
                [38, 23, 33],
                [57, 86, 31]
            ],
            marker: {
                lineColor: 'red'
            }
        }]
    });
});

以下是我的JSFIDLE：

我想在图表下方，图例上方添加一个静态图像或文本，以指示虚线气泡的含义

此答案显示了如何将其添加到图例下方：

我不知道如何修改它

提前谢谢。

你可以这样做

 $('#container').highcharts({
  xAxis: {
      title: {
        text: "DISPLAY WHATEVER YOU WANT TO"
      }
    },

编辑

  chart: {
                events: {
                    load: function () {
                        var label = this.renderer.image('http://highcharts.com/demo/gfx/sun.png', 20, 50, 30, 30)
                        .css({
                            width: '450px',
                            color: '#222',
                            fontSize: '16px'
                        })
                        .attr({
                            'stroke': 'silver',
                            'stroke-width': 2,
                            'r': 5,
                            'padding': 10
                        })
                        .add();

                        label.align(Highcharts.extend(label.getBBox(), {
                            align: 'center',
                            x: 0, // offset
                            verticalAlign: 'bottom',
                            y: 50 // offset
                        }), null, 'spacingBox');

                    }
                },

增加和增加性能

chart: {
  spacingBottom: 100,
},

legend: {
    y: 100
},

渲染标签/图像，将其对齐并设置其y属性

function renderLabel() {
var label = this.renderer.label("How do I move this center and under the legend.")
  .css({
    width: '180px'
  })
  .attr({
    'stroke': 'silver',
    'stroke-width': 1,
    'r': 5,
    'padding': 10
  })
  .add();

label.align(Highcharts.extend(label.getBBox(), {
  align: 'center',
  x: 0, // offset
  verticalAlign: 'bottom',
  y: 60 // offset
}), null, 'spacingBox');
}

值大多是硬编码的，但如果您想以动态方式进行编码，则需要根据标签/img高度设置值

---

示例：

我不希望添加x轴标题。我需要一个静态文本/图像被包括在图表下方（x轴标题下方）和图例上方。