无法在柱形图上打印 jspdf
cant print jspdf on column chart
祝大家今天愉快。我试图用我的柱形图(google 图表)制作一个 pdf 文件,我正在使用 jspdf。当我尝试用条形图和饼图制作 pdf 文件时,代码似乎工作正常
但是当我尝试在柱形图上对其进行编码时,它不会打印 pdf
我尝试搜索我的代码,但它看起来不错
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new
google.charts.Bar(document.getElementById('columnchart_material'));
var btnSave = document.getElementById('save-pdf');
google.visualization.events.addListener(chart, 'ready', function () {
btnSave.disabled = false;
});
btnSave.addEventListener('click', function () {
var doc = new jsPDF();
doc.addImage(chcolumnchart_material.getImageURI(), 10, 10, 180, 150);
doc.save('chart.pdf');
}, false);
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js">
</script>
<input id="save-pdf" type="button" value="Save as PDF" disabled />
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
getImageURI()
图表方法 material 图表不支持。
material --> google.charts.Bar
-- packages: ['bar']
您需要使用 经典 图表。
经典 --> google.visualization.BarChart
-- packages: ['corechart']
或 --> google.visualization.ColumnChart
注意:有一个配置选项可以设置 classic 图表的样式 similar to material 图表...
theme: 'material'
祝大家今天愉快。我试图用我的柱形图(google 图表)制作一个 pdf 文件,我正在使用 jspdf。当我尝试用条形图和饼图制作 pdf 文件时,代码似乎工作正常
但是当我尝试在柱形图上对其进行编码时,它不会打印 pdf
我尝试搜索我的代码,但它看起来不错
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new
google.charts.Bar(document.getElementById('columnchart_material'));
var btnSave = document.getElementById('save-pdf');
google.visualization.events.addListener(chart, 'ready', function () {
btnSave.disabled = false;
});
btnSave.addEventListener('click', function () {
var doc = new jsPDF();
doc.addImage(chcolumnchart_material.getImageURI(), 10, 10, 180, 150);
doc.save('chart.pdf');
}, false);
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js">
</script>
<input id="save-pdf" type="button" value="Save as PDF" disabled />
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
getImageURI()
图表方法 material 图表不支持。
material --> google.charts.Bar
-- packages: ['bar']
您需要使用 经典 图表。
经典 --> google.visualization.BarChart
-- packages: ['corechart']
或 --> google.visualization.ColumnChart
注意:有一个配置选项可以设置 classic 图表的样式 similar to material 图表...
theme: 'material'