Экспортировать диаграмму Морриса. js в PDF? - PullRequest
Новая
       6

Экспортировать диаграмму Морриса. js в PDF?

1 голос
/ 09 марта 2020

Я создал Morris. js Гистограмма, используя данные php и MySQL. Я хочу сейчас экспортировать диаграмму в PDF. Есть ли способ сделать это? Я использую библиотеку FPDF, но не знаю, как это сделать. 

<?php
include_once("connection.php");

$chart_data = '';

$db = new dbObj();
$connString =  $db->getConnstring();
$id=$_GET['id'];
$query = $connString->prepare("SELECT ID, Name, Wrongs, Rights, Percentage, Age FROM Datas WHERE ID=?");
$query->bind_param('s',$id);
$query->execute();
$result=$query->get_result();

while($row = mysqli_fetch_array($result))
{
    $chart_data .= "{ ID:'".$row["ID"]."', Wrongs:".$row["Wrongs"].", Rights:".$row["Rights"]." , Age:".$row["Age"]. ", Percentage:".$row["Percentage"]."},";

}
echo $chart_data;

$chart_data = substr($chart_data, 0);

?>

<!DOCTYPE html>
<html>
 <head>
  <title> PHP & Mysql</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:900px;">
   <h2 align="center">MySQL</h2>
   <h3 align="center">Data</h3>   
   <br /><br />
   <div id="bar-chart" data-colors="#29abe2,#ffc142,#1ab394, #FF0000, #FFFF00" ></div>
 </body>
</html>

<script>
$(document).ready(function () { 
var labelColor = jQuery('#bar-chart').css('color');
 Morris.Bar({
  element: 'bar-chart',
  data:[<?php echo $chart_data; ?>],
  xkey: 'ID',
  ykeys: ['Rights', 'Wrongs', 'Percentage', 'Age'],
  labels: ['Rights','Wrongs', 'Percentage', 'Age'],
  hideHover:true,
  gridTextColor: labelColor,
  barColors: jQuery('#bar-chart').data('colors').split(',')
 // yLabelFormat: function(y) {return y = Math.round(y);}
  });
});
</script>

1 Ответ

1 голос
/ 09 марта 2020

Я сделал это, используя html2canvas. Сценарий приведен ниже. Сначала мы должны добавить библиотеки html2canvas и jspdf в html. 

  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.1/dist/html2canvas.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

Добавьте кнопку для вызова. 

<div id="chart"></div>
  <button id="save">Download</button>

Затем добавьте этот скрипт после Morris.Bar chart 

$("#save").click(function() {
    html2canvas(document.getElementById('bar-chart')).then(canvas => {
        var w = document.getElementById("bar-chart").offsetWidth;
        var h = document.getElementById("bar-chart").offsetHeight;

        var img = canvas.toDataURL("image/jpeg", 1);

        var doc = new jsPDF('L', 'pt', [w, h]);
        doc.addImage(img, 'JPEG', 10, 10, w, h);
        doc.save('sample-file.pdf');
    }).catch(function(e) {
        console.log(e.message);
    });
})
...