導出多個帶有文本區域的highcharts以將其高級圖表導出爲多個PDF文件

Question

我想用textarea將多個highcharts導入多個pdf文件。 如何願買電子健康我轉換多個highcharts與文本區域以多個PDF $（函數（）{ Highcharts.getSVG =函數（圖表，文本）{ VAR svgArr = []， 頂= 0， 寬度= 0， TXT ; VAR SVG = chart.getSVG（）; SVG = svg.replace（ ''， ''）;

 top += chart.chartHeight; 
     width = Math.max(width, chart.chartWidth); 

     svgArr.push(svg); 
     txt = '<text x= "' + 0 + '" y = "' + (top + 20) + '" styles = "' + text.attributes.style.value + '">' + $(text).val() + '</text>'; 
     top += 200; 
     console.log(txt.indexOf('\n')) 
     svgArr.push(txt); 
     return '<svg height="' + top + '" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>'; 
     }; 
     Highcharts.getSVG = function(chart, text) { 
     var svgArr = [], 
      top = 0, 
      width = 0, 
      txt; 
     var svg = chart.getSVG(); 
     svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" '); 
     svg = svg.replace('</svg>', '</g>'); 

     top += chart.chartHeight; 
     width = Math.max(width, chart.chartWidth); 

     svgArr.push(svg); 
     txt = '<text x= "' + 0 + '" y = "' + (top + 20) + '" styles = "' + text.attributes.style.value + '">' + $(text).val() + '</text>'; 
     top += 200; 
     console.log(txt.indexOf('\n')) 
     svgArr.push(txt); 
     return '<svg height="' + top + '" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>'; 
     }; 

     Highcharts.exportChartWithText = function(chart, text, options) { 

     // Merge the options 
     options = Highcharts.merge(Highcharts.getOptions().exporting, options); 

     // Post to export server 
     Highcharts.post(options.url, { 
      filename: options.filename || 'chart', 
      type: options.type, 
      width: options.width, 
      svg: Highcharts.getSVG(chart, text) 
     }); 
     }; 
    Highcharts.exportChartWithText = function(chart, text, options) { 

     // Merge the options 
     options = Highcharts.merge(Highcharts.getOptions().exporting, options); 

     // Post to export server 
     Highcharts.post(options.url, { 
      filename: options.filename || 'chart', 
      type: options.type, 
      width: options.width, 
      svg: Highcharts.getSVG(chart, text) 
     }); 
     }; 



     chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'column' 
     }, 
     title: { 
      text: 'Stacked bar chart' 
     }, 
     xAxis: { 
      categories: ['PreviousMonthutilizationforCPU', 'CurrentMonthUtilizationforCPU', 'Week2', 'Week2', 'Week3', 'Week4'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
      text: 'POD' 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
      return '<b>' + this.x + '</b><br/>' + 
       this.series.name + ': ' + this.y + '<br/>' + 
       'Total: ' + this.point.stackTotal; 
      } 
     }, 
     legend: { 
      reversed: true 
     }, 
     plotOptions: { 
      series: { 
      stacking: 'normal' 
      } 
     }, 

     series: [{ 
      data: [1, 2, 3, 3, 4] 
     }], 

     exporting: { 
      enabled: true 
     } 
     }); 

     chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container1', 
      type: 'column' 
     }, 
     title: { 
      text: 'Stacked bar chart' 
     }, 
     xAxis: { 
      categories: ['PreviousMonthutilizationforCPU', 'CurrentMonthUtilizationforCPU', 'Week2', 'Week2', 'Week3', 'Week4'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
      text: 'POD' 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
      return '<b>' + this.x + '</b><br/>' + 
       this.series.name + ': ' + this.y + '<br/>' + 
       'Total: ' + this.point.stackTotal; 
      } 
     }, 
     legend: { 
      reversed: true 
     }, 
     plotOptions: { 
      series: { 
      stacking: 'normal' 
      } 
     }, 

     series: [{ 
      data: [1, 2, 3, 3, 4] 
     }], 

     exporting: { 
      enabled: true 
     } 
     }); 


     var text = document.getElementById('txt'); 

     $("#export2pdf").click(function() { 
     Highcharts.exportChartWithText(chart, text, { 
      type: 'application/pdf', 
      filename: 'wow-pdf' 
     }); 
     }); 
     $("#export2pdf").click(function() { 
     Highcharts.exportChartWithText(chart, text, { 
      type: 'application/pdf', 
      filename: 'wow-pdf' 
     }); 
     }); 
    }); 

Answer 1

一個答案的第一部分是在這裏： Export Multiple highcharts with custom text into pdf

爲了回答第二問題，在你的紀念問NT（關於突破線路） - 你需要稍微改變一下代碼。您可以使用tspan來打破您的界限。你應該還記得關於更改標籤的寬度，每一個新行：

Highcharts.getSVG = function(charts, texts) { 
    var svgArr = [], 
     top = 0, 
     width = 0, 
     txt, 
     numberOfLines; 
    Highcharts.each(charts, function(chart, i) { 
     var svg = chart.getSVG(); 
     svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" '); 
     svg = svg.replace('</svg>', '</g>'); 
     top += chart.chartHeight; 
     width = Math.max(width, chart.chartWidth); 
     svgArr.push(svg); 
     txt = texts[i]; 
     value = $(txt).val().replace(/\n/g, '</tspan><tspan x="0" dy="1.2em">'); 
     numberOfLines = $(txt).val().split("\n").length; 
     txt = '<text x= "' + 0 + '" y = "' + (top + 20) + '" styles = "' + txt.attributes.style.value + '"><tspan x="0" dy="1.2em">' + value + '</tspan></text>'; 
     top += 1.2 * 16 * numberOfLines + 20; 
     svgArr.push(txt); 
    }); 
    return '<svg height="' + top + '" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>'; 
    }; 

http://jsfiddle.net/6m2rneL8/35/