我正在尝试将整个 flot 饼图保存为 PDF。 我正在使用 jQuery/FLOT 绘制饼图和条形图，我希望用户能够下载 Flot Charts 的 PDF 版本。
任何想法请我感谢。
这是我的代码
var data = [
{ label: "studentsCount", color: "#4572A7" ,data: <?php echo $studentsCount; ?>},
{ label: "lecturesCount", color: "#ED47E2" , data: <?php echo $lecturesCount; ?>}
];
$(document).ready(function () {
$.plot($("#placeholder"), data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius:0.7,
formatter: function(label, series) {
var result =[ <?php echo $studentsCount; ?> , <?php echo $witnessedCount; ?>
];
if ( label == "unwitnssedCount")
{
return '<div style="font-size:15px; text-align:center; left:-90px; top:-18px;
position:absolute; color:white;">'+label+'<br/>'+(result[0])+'</div>';
}
else if (label == "lecturesCount")
{
return '<div style="font-size:17px; text-align:center; left:-33px; top:-18px;
position:absolute; color:white;">'+label+'<br/>'+(result[1])+'</div>';
}
},
background: {
opacity: 0.8,
}
}
}
},
grid: {
clickable: true
},
legend: {
labelBoxBorderColor: "none"
}
});
$("#placeholder").bind("plotclick", pieHover);
$("#toPdf").on("click", function(e) {
e.preventDefault();
html2canvas($("#pdf").get(0), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
var imgData = canvas.toDataURL('image/png');
console.log('Report Image URL: '+imgData);
var doc = new jsPDF('landscape');
doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
doc.save('charts.pdf');
}
});
});
});
function pieHover(event, pos, obj) {
if (!obj)
return;
var links = ['../../Charts/students/studentsCount.php', '../../Charts/students/lecturesCount.php'];
var result =[ <?php echo $studentsCount; ?> , <?php echo $lecturesCount; ?>
];
if ( obj.series.label == "studentsCount")
{
$("#pieHover").html('<span style="font-weight: bold; color:
'+obj.series.color+'">'+obj.series.label+' ('+result[0]+')</span>');
window.open(links[0], '_blank');
console.log(obj);
}
else if ( obj.series.label == "lecturesCount")
{
$("#pieHover").html('<span style="font-weight: bold; color:
'+obj.series.color+'">'+obj.series.label+' ('+result[1]+')</span>');
window.open(links[1], '_blank');
console.log(obj);
}
}
HTML代码
body { font-family: Verdana, Arial, sans-serif; font-size: 14px; }
#placeholder { width: 500px; height: 300px;top: -680px; left:0px;}
.legend table, .legend > div { height: 122px !important; opacity: 1 !important; left: -60px;
width:
100px !important; }
.legend table { border: 1px solid #555; padding: 5px; }
.form-actions {top: -90px;}
</style>
<!-- HTML -->
<div id="flot-placeholder" style="width:450px;height:300px;margin:0 auto"></div>
</script>
</head>
<body>
<div style="width:450px;height:300px;text-align:center;margin:10px">
<div id="flot-placeholder" style="width:100%;height:100%;"></div>
</div>
<div id="container" style="min-width: 295px; height:300px; max-width: 400px; margin: 0 auto;
position: absolute;right: 80px; top: 147px; "></div>
<div id="placeholder">
</div>
<canvas class="flot-base" width="250" height="150" style="direction: ltr; position: absolute;
right: 20px; top: 0px; width: 250px; height: 150px;"></canvas>
<canvas class="flot-overlay" width="250" height="250" style="direction: ltr; position: absolute;
right: 20px; top: -20px; width: 250px; height: 150px;"></canvas>
谢谢，
最佳答案
试试这个例子，只需点击“另存为pdf”，下载就会开始
var _canvas = null;
$(function() {
$.plot($("#container"), [ { label: 'Test', data: [[0, 0], [1, 1]] } ], { yaxis: { max: 1 } });
$("#toPdf").on("click", function(e) {
e.preventDefault();
html2canvas($("#container").get(0), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
var imgData = canvas.toDataURL('image/png');
console.log('Report Image URL: '+imgData);
var doc = new jsPDF('landscape');
doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
doc.save('testpdf.pdf');
}
});
});
});
HTML
<div id="container" style="width:430px;height:300px"></div>
<a id="toPdf">Download as pdf</a>
更新
试试这段代码
html
<div id="flot-placeholder" style="width:450px;height:300px;margin:0 auto"></div>
<a id="toPdf">Download as pdf</a>
<div style="width:450px;height:300px;text-align:center;margin:10px">
<div id="flot-placeholder" style="width:100%;height:100%;"></div>
</div>
<!-- Div for second pie chart (Intervention and falls Assessment) -->
<div id="container" style="min-width: 295px; height
:300px;最大宽度:400px； margin : 0 auto ；position:absolute；右:80px；顶部:147px； ">
JavaScript
//******* 2012 Average Temperature - BAR CHART
var data = [
[0, 0],
[1, 1],
[2, 2],
[3, 3],
[4, 4],
[5, 5],
[6, 6],
[7, 7],
[8, 8],
[9, 9],
[10, 10]
];
var dataset = [
{ label: "", data: data, color: "#5482FF" }
];
var ticks = [
[0, "0-2"], [1, "2-4"], [2, "4-6"], [3, "6-8"],
[4, "8-10"], [5, "10-12"], [6, "12-14"], [7, "14-16"],
[8, "16-18"], [9, "18-20"], [10, "20-22"], [11, "22-00"]
];
var options = {
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.6 ,
vertical: true ,
show:true
},
xaxis: {
axisLabel: "Falls By Time Of Day",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
tickLength:0,
ticks: ticks
},
yaxis: {
axisLabel: "Number of ",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
max:20, tickSize:1,
tickFormatter: function (v, axis) {
return v;
}
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
clickable: true,
borderWidth: 1,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
}
};
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
});
function gd(year, month, day) {
return new Date(year, month, day).getTime();
}
var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plotclick", function (event, pos, item) {
var links = [ '../../Charts/result1.php', '../../Charts/result2.php', '../../Charts/result3.php'
, '../../Charts/result4.php', '../../Chartsresult5.php' , '../../Charts/result6.php'
, '../../Charts/result7.php', '../../Charts/result8.php' , '../../Charts/result9.php'
, '../../Chartsresult10.php', '../../Charts/result11.php'
];
if (item)
{
//alert("clicked");
// window.location = (links[item.dataIndex]);
window.open(links[item.dataIndex], '_blank');
console.log(item);
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 40,
left: x - 120,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 10
}).appendTo("body").fadeIn(200);
}
// Flot Pie Chart
var data = [
{ label: "studentsCount", color: "#4572A7" ,data: 10},
{ label: "lecturesCount", color: "#ED47E2" , data: 10}
];
$(document).ready(function () {
$.plot($("#flot-placeholder"), data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius:0.7,
formatter: function(label, series) {
var result =[ 10 , 10 ];
if ( label == "studentsCount")
{
return '<div style="font-size:15px; text-align:center; left:-90px; top:-18px; position:absolute; color:white;">'+label+'<br/>'+(result[0])+'</div>';
}
else if (label == "lecturesCount")
{
return '<div style="font-size:17px; text-align:center; left:-33px; top:-18px; position:absolute; color:white;">'+label+'<br/>'+(result[1])+'</div>';
}
},
background: {
opacity: 0.8,
}
}
}
},
grid: {
clickable: true
},
legend: {
labelBoxBorderColor: "none"
}
});
$("#flot-placeholder").bind("plotclick", pieHover);
$("#toPdf").on("click", function(e) {
e.preventDefault();
html2canvas($("#flot-placeholder").get(0), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
var imgData = canvas.toDataURL('image/png');
console.log('Report Image URL: '+imgData);
var doc = new jsPDF('landscape');
doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
doc.save('charts.pdf');
}
});
});
});
function pieHover(event, pos, obj) {
if (!obj)
return;
var links = ['../../Charts/studentsCount.php', '../../Charts/lecturesCount.php'];
var result =[ 10 , 10
];
if ( obj.series.label == "studentsCount")
{
$("#pieHover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+result[0]+')</span>');
window.open(links[0], '_blank');
console.log(obj);
}
else if ( obj.series.label == "lecturesCount")
{
$("#pieHover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+result[1]+')</span>');
window.open(links[1], '_blank');
console.log(obj);
}
}
关于javascript - 将 flot 饼图另存为 PDF，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27147479/