エクスポートされたハイチャート内のテキストのための空き領域

Question

私たちは、指定されたコンテナ内のデータに基づいて拡大/縮小するbarchartを持っています。ユーザーはグラフをPDFにエクスポートすることもできます。エクスポート中に、テキストがあらかじめ決められた場所に配置されます。

グラフの高さが十分に高い場合は、グラフがテキストに表示されます。 sourceWidthおよび/またはsourceHeightを調整すると、グラフはすべての領域を占めるようになります。本質的には、エクスポートされた文書の中にテキスト用のスペースを確保して、バーがテキスト内に決して走らないようにする方法を探しています。これはどうすればいいですか？

左のバーの最上部の2つのブロックがテキストに流れていることに注目してください。

マイ輸出コードは次のとおりです。

$scope.exportPdf = function() { 
     var chart = $("#group-chart").highcharts(); 
     var exportOptions = { 
      type: "application/pdf", 
      filename: "Chart", 
      sourceWidth: 850, 
      sourceHeight: 1100 
     }; 
     var chartOptions = { 
      yAxis: { 
       gridLineWidth: 0, 
       labels: { 
        enabled: false 
       }, 
       title: { 
        text: null 
       } 
      } 
     }; 
     chart.exportChart(exportOptions, chartOptions); 
    }; 

私は以下のようにexporting.chartOptions.chart.eventsのloadイベントでいくつかのテキストを含めています：

this.renderer.text(disclaimerText, 100, 100) 
    .css({ 
    fontSize: "60%", 
    lineHeight: "10%", 
    width: "600px" 
    }).add(); 

Answer 1

レンダリングされたテキストの位置が分かっている場合には、エクスポートされたグラフのマージンを設定することができます。

chart: { 
    marginTop: 150, 
    events: { 
     load: function() { 
     this.renderer.text('custom text', 100, 100) 
      .css({ 
      fontSize: "60%", 
      lineHeight: "10%", 
      width: "600px" 
      }).add(); 
     } 
    } 
    }, 

例：テキストは静的であるhttp://jsfiddle.net/5jvpzsqm/