堆栈内存溢出
  简体   繁体   English

Highcharts：使用jspdf导出多个图表

[英]Highcharts: Export multiple charts using jspdf

 原文  2019-02-19 08:29:38  2   1    javascript/ highcharts/ jspdf

问题描述

When I try to export several Highcharts charts using jsPdf I'm not getting the graph in the proper way. 当我尝试使用jsPdf导出几个Highcharts图表时，我没有以正确的方式获取图表。

在此处输入图片说明

Could you please help me out in this? 你能帮我这个忙吗？

JAVASCRIPT CODE JAVASCRIPT代码 

 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 code 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>

If it is not possible with the jsPDf is there any framework that can be used to export the highcharts? 如果使用jsPDf不可能，是否可以使用任何框架导出高位图表？

jsFiddle link: jsFiddle链接：

1 个解决方案

解决方案1
 0  2019-02-19 14:50:53

To download multiple charts using jspdf you can use this approach: 要使用jspdf下载多个图表，可以使用以下方法：

  1. send AJAX to Highcharts server with options for each of the charts. 将AJAX发送给Highcharts服务器，其中包含每个图表的选项。 The return will be an URL to the image on the server. 返回值将是服务器上图像的URL。
  2. convert images from Highcharts server into the base64 format ( https://stackoverflow.com/a/20285053/10077925 ). 将来自Highcharts服务器的图像转换为base64格式（ https://stackoverflow.com/a/20285053/10077925 ）。
  3. Add charts images, logo, footer to pdf using jspdf library and save the result. 使用jspdf库将图表图像，徽标，页脚添加到pdf并保存结果。

Code: 码： 

 // ############### 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>

Demo: 演示：

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用Highcharts导出多种尺寸的图表？ - How to export charts in multiple sizes with Highcharts? Highcharts：在自定义布局中将多个图表导出到 pdf - Highcharts : Export multiple charts to pdf in custom layout 使用多个谷歌图表和jspdf生成PDF - Generating PDF using multiple google charts and jspdf 将Highcharts导出到jsPDF-CANVG错误 - Export Highcharts to jsPDF - canvg error 如何使用 highcharts 显示多个饼图 - How to show multiple pie charts using highcharts 如何在循环中使用高图制作多个图表？ - How to make multiple charts using highcharts in a loop? 使用具有来自JSON的多个序列的Highcharts的图表 - Charts using Highcharts with multiple series from JSON 使用jspdf导出数据时出错 - error in using jspdf to export data 使用jspdf将数组导出为表格 - export an array as table using jspdf 使用jsPDF将html导出为pdf - Export html to pdf using jsPDF
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM