Question

当我尝试使用jsPdf导出多个Highcharts图表时，我没有以正确的方式获取图表。

您能帮我吗？

JAVASCRIPT CODE

 Highcharts.chart('container', {

title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
},

subtitle: {
    text: 'Source: thesolarfoundation.com'
},

yAxis: {
    title: {
        text: 'Number of Employees'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

plotOptions: {
    series: {
        label: {
            connectorAllowed: false
        },
        pointStart: 2010
    }
},

series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

});

Highcharts.chart('container1', {

title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
},

subtitle: {
    text: 'Source: thesolarfoundation.com'
},

yAxis: {
    title: {
        text: 'Number of Employees'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

plotOptions: {
    series: {
        label: {
            connectorAllowed: false
        },
        pointStart: 2010
    }
},

series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

});

 Highcharts.chart('container2', {

title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
},

subtitle: {
    text: 'Source: thesolarfoundation.com'
},

yAxis: {
    title: {
        text: 'Number of Employees'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

plotOptions: {
    series: {
        label: {
            connectorAllowed: false
        },
        pointStart: 2010
    }
},

series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

});

 Highcharts.chart('container3', {

title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
},

subtitle: {
    text: 'Source: thesolarfoundation.com'
},

yAxis: {
    title: {
        text: 'Number of Employees'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

plotOptions: {
    series: {
        label: {
            connectorAllowed: false
        },
        pointStart: 2010
    }
},

series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

});

Highcharts.chart('container4', {

title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
},

subtitle: {
    text: 'Source: thesolarfoundation.com'
},

yAxis: {
    title: {
        text: 'Number of Employees'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

plotOptions: {
    series: {
        label: {
            connectorAllowed: false
        },
        pointStart: 2010
    }
},

series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

});
function exportToPdf(){
        var pdf = new jsPDF('p','pt','a4');
          var margins = {
            top: 25,
            bottom: 60,
            left: 20,
            width: 522
          };
         pdf.addHTML(document.body, margins.top, margins.left, {}, function() {
           pdf.save('test.pdf');
         });
    }

HTMl代码

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src='https://cdn.rawgit.com/simonbengtsson/jsPDF/requirejs-fix-dist/dist/jspdf.debug.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.js'></script>
<script src="https://raw.githubusercontent.com/CBiX/svgToPdf.js/master/svgToPdf.js"></script>
<button onclick="exportToPdf()">
Export
</button>
<div id="container"></div>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>

如果jsPDf无法实现，是否有任何可用于导出高位图表的框架？

jsFiddle链接：

https://jsfiddle.net/GnanaSagar/3p21xgt9/18/

Answer 1

要使用jspdf下载多个图表，可以使用以下方法：

将AJAX发送给Highcharts服务器，其中包含每个图表的选项。返回值将是服务器上图像的URL。
将Highcharts服务器中的图像转换为base64格式（https://stackoverflow.com/a/20285053/10077925）。
使用jspdf库将图表图像，徽标，页脚添加到pdf并保存结果。

代码：

// ############### CHARTS OPTIONS ###############

Highcharts.chart('container1', {
  title: {
    text: 'Chart 1'
  },
  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },
  series: [{
    name: 'Installation',
    color: 'red',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }]
});

Highcharts.chart('container2', {
	chart: {
  	type: 'column'		
  },
  title: {
    text: 'Chart 2'
  },
  series: [{
    name: 'Manufacturing',
    color: 'green',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }],
});

Highcharts.chart('container3', {
	chart: {
  	type: 'bar'		
  },
  title: {
    text: 'Chart 3'
  },
  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },
  series: [{
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }]
});

Highcharts.chart('container4', {
  chart: {
    backgroundColor: '#efefef',
    type: 'pie'
  },
  title: {
    text: 'Chart 4'
  },
  series: [{
    name: 'Project Development',
    color: 'purple',
    data: [7988, 12169, 15112, 22452, 34400, 34227]
  }]
});

Highcharts.chart('container5', {
  chart: {
    backgroundColor: '#c5c5c5',
    type: 'spline'
  },
  title: {
    text: 'Chart 5'
  },
  series: [{
    name: 'Project Development',
    color: 'purple',
    data: [7988, 12169, 15112, 22452, 34400, 34227]
  }]
});

// ############### CHARTS OPTIONS ###############


const toDataURL = url => fetch(url)
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  }));


$('#btn').click(function() {
  var charts = Highcharts.charts,
    exportUrl = 'https://export.highcharts.com/',
    doc = new jsPDF(),
    pageHeight = doc.internal.pageSize.getHeight(),
    ajaxCalls = [],
    promises = [],
    yDocPos = 0,
    k = 0,
    chart,
    imgUrl,
    i,
    j;

  for (i = 0; i < charts.length; i++) {
    chart = charts[i];
    
    ajaxCalls.push($.ajax({
      type: 'post',
      url: exportUrl,
      data: {
        options: JSON.stringify(chart.userOptions),
        type: 'image/png',
        async: true
      }
    }));
  }

  $.when.apply(null, ajaxCalls).done(function() {

    for (j = 0; j < arguments.length; j++) {
      imgUrl = exportUrl + arguments[j][0];
      promises[j] = toDataURL(imgUrl);
    }

    Promise.all(promises).then((values) => {
      values.forEach((value, index) => {
      	var page = doc.internal.getCurrentPageInfo();
        if (yDocPos > pageHeight - 150) {
          doc.addPage();
          yDocPos = 25;
          k = 0;
        } else {
        	yDocPos = 25 + k * 140;
        }

        doc.setFontSize(30);
        doc.text(50, yDocPos, 'jspdf title for Chart' + (index + 1));
        
        yDocPos += 15;
        doc.addImage(value, 'PNG', 20, yDocPos);
        
        k++;
      });
      doc.save('charts.pdf');
    });
  });
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>

<button id="btn">Export PDF</button>
<br><br>
<div>
  <div id="container1"></div>
  <div id="container2"></div>
  <div id="container3"></div>
  <div id="container4"></div>
  <div id="container5"></div>
</div>

演示：

https://jsfiddle.net/BlackLabel/uwg6c3yh/

高图：使用jspdf

1 个答案: