如何將文字添加到海圖的底部，但在圖例上方？

我想在海圖上添加一些文字或圖片，但它必須出現在海圖的圖例上方。如何將文字添加到海圖的底部，但在圖例上方？

我的代碼：

$(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?

我在一個不知如何對其進行修改。

在此先感謝。

來源

2016-11-14 Penman

你可以做到這一點，

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

來源

2016-11-14 12:48:46 Sajeetharan

我不想要添加x軸標題。我需要在圖表下方（x軸標題下方）和圖例上方包含一個靜態文本/圖像。 – Penman

@Penman好吧！順便說一句，你的問題標題是誤導 – Sajeetharan

@Penman檢查更新的答案 – Sajeetharan

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

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高度值。

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

來源

2016-11-14 14:32:11 morganfree

如何將文字添加到海圖的底部，但在圖例上方？

回答

相關問題