ハイチャートの下部に凡例の上にテキストを追加するにはどうすればよいですか？

Question

ハイチャートの下にテキストやイメージを追加したいのですが、ハイチャートの凡例の上に表示する必要があります。

マイコード：

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

EDIT

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

Answer 2

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/