javascript - 如何将文本添加到 Highchart 的底部，但在图例上方？

Question

我想在 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'
            }
        }]
    });
});

这是我的 JsFiddle:http://jsfiddle.net/qebxk6ty/6/

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

此答案显示了如何将其添加到图例下方: How do you add text to the bottom center of legend and bottom center of chart under legend?

我不知道如何修改它。

提前致谢。

Answer 1

你可以这样做，

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

DEMO

编辑

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

                    }
                },

DEMO