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

你可以这样做，

  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

修改

- name: upgrade all packages yum: name=* state=latest register: result - name: Show output when: result|succeeded debug: msg="{{ result.stdout_lines }}"

<强> DEMO

Answer 2

增加chart.spacingBottom和legend.y属性。

select2:select

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

chart: {
  spacingBottom: 100,
},

legend: {
    y: 100
},

值大部分是硬编码的，但如果您想以动态方式进行操作，则需要根据label / img height设置值。

示例：http://jsfiddle.net/qebxk6ty/7/

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

2 个答案: