将带有文本区域的多个 highcharts 导出为多个 PDF 文件

Question

我想将多个带有 textarea 的 highcharts 导出到多个 pdf 文件。 如何将多个带有 textarea 的 highcharts 转换为多个 pdf 文件？

   $(function() {
      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.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

要回答您在评论中提出的第二个问题（关于换行） - 您需要稍微更改代码。您可以使用 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/