導出文本的預留空間Highchart

我們有一個根據給定容器內的數據增長/縮小的條形圖。我們還允許用戶將圖表導出爲PDF。在導出期間，一些文本被放置在預定位置。導出文本的預留空間Highchart

當圖表足夠高時，圖表會顯示在文本中。當我調整sourceWidth和/或sourceHeight時，圖表增加以佔用所有空間。從本質上講，我正在尋找方法來爲文本保留導出文檔中的一些空間，以便該欄永遠不會進入文本。我該怎麼做呢？

請注意左側欄的最頂部兩個塊進入文本。

我出口的代碼是：

$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); 
    };

我包括在load事件exporting.chartOptions.chart.events如下一些文字：

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

來源

2016-12-13 WiSeeker

如果文字是靜態的，調整幅度最高http://jsfiddle.net/5jvpzsqm/ – morganfree

優秀。這工作得很好。如果你能提供這個答案，我會接受它。 – WiSeeker

如果渲染文本的位置是已知的，你可以設置一個導出圖表的邊界。

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/

來源

2016-12-14 16:44:31 morganfree

導出文本的預留空間Highchart

回答

相關問題