如何在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'
            }
        }]
    });
});

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

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

这样的回答显示了如何将其添加到下面的传说:你如何添加文本传说和传奇下表的底部中心的底部中心?

我对如何修改它一无所知。

提前致谢。

萨耶塔兰(Sajeetharan)

你可以这样做,

 $('#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');

                    }
                },

演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章