Speichern Chartjs von Javascript in PHP per Formular

Ich mache einen Bericht, und ich muss Graph Ergebnis nach innen setzen.Speichern Chartjs von Javascript in PHP per Formular

Ich weiß über Javascript (Client) und PHP (Server) Problem, aber ich muss das beheben.

Das Hauptproblem: Ich muss Graph als PNG-Datei speichern, um meinen Bericht zu setzen.

Ich lese fast hundert Fragen hier, aber ich habe die Lösung nicht gefunden.

Um ein Diagramm zu generieren, verwende ich ChartJS.

Ich habe drei Dateien erstellt, aber ich bin nicht so sicher, was los ist.

PHP (exemplo4.php)

<?php 
     session_start(); 
    ?> 
    <!DOCTYPE html> 
    <html> 
     <head> 
      <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
      <title>Graph Chartjs Export</title> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
      <style> 
       .myForm { text-align:center; } 
      </style> 
     </head> 
     <body> 
      <?php 
       $example = "let's go"; 
       $_SESSION['example'] = $example; 
      ?> 
      <form id="myForm" method=POST action="graphresult4.php" > 
       Value1: 
       <input type="text" name="value1" value="123" /> <br><br> 
       Graphic: <br> 
       <input type="hidden" name="imageData" id="imageData" /> <br> 
       <canvas id="drawing" width="350" height="200"></canvas> <br> 
       <input type="submit" value="submit"> 
      </form> 
      <script type="application/javascript" src="graphic4.js"></script>  
     </body> 
    </html>

Javascript

var ctx = document.getElementById("drawing").getContext("2d"); 
    var data = { 
     labels: ['Jan', 'Feb', 'Mar'], 
     datasets: [{ 
       label: "# of votes", 
       fillColor: "#07C", 
       data: [50, 80, 200] 
     }] 
    }; 

    var myBarChart = new Chart(ctx).Bar(data, { 
     scaleOverride: true, 
     scaleSteps: 10, // number of ticks 
     scaleStepWidth: 10, // tick interval 
     scaleBeginAtZero: true 
    }); 


    $('#myForm').submit(function(e) { 
      e.preventDefault(); // don't submit multiple times 
      this.submit(); // use the native submit method of the form element 
      $('#myForm').val('imageData') = "2"; 
     //var imgData = ctx.toDataURL("image/png"); 
     document.getElementById('imageData').value="test"; 
     alert('Here'); 
    });

PHP (graphresult4.php)

<?php 
     session_start(); 
    ?> 
    <!DOCTYPE html> 
    <html> 
     <head> 
      <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
      <title>Graph Chartjs Export</title> 
     </head> 
     <body> 
      <?php 
       $example = $_SESSION['example']; 
       echo '<b>PHP Variable: </b> [example] => '.$example.'<br><br>'; 
       echo '<b>POST Variables</b><br>'; 
       print_r($_POST); 
      ?> 
      <br> 
      <br> 
      <b>Script</b> 
      <p> imageData = 
      <script> 
       document.writeln(imageData); 
      </script> 
      </p> 
     </body> 
    </html>

Zu meinem Beispiel habe ich hier geputtet zu testen:

http://profwtelles.ddns.net/teste/phpjava/exemplo4.php

Mein Problem ist: Die Variable imageData ist immer leer und send Funktion innerhalb von Javascript läuft nicht.

Ich entfernte Zeile:. $ ('# MyForm') val ('imagedata') = "2"

Geändert:

In graphresult4.php definieren, $ imagedata = $ _POST [‘ imageData '];

document.writeln ('[php] echo $ imageData; [/ php]');

Ergebnis:

PHP Variable: [example] => let's go 

POST Variables 
Array ([value1] => 123 [imageData] =>) 

Script 
imageData = [ php] echo $imageData; [/php]

imagedata ist wieder leer.

Quelle

2017-11-29 Wellington Telles Cunha

$ ('# myForm') val ('imagedata') = "2". Was diese Linie hier? – seravee

Ich habe einen Test gemacht, um zu sehen, ob sich alles ändert –

 

Remove this -> $('#myForm').val('imageData') = "2"; 

Add document.getElementById('imageData').value="test"; before submit, 
In graphresult4.php define, 
$imageData = $_POST['imageData']; 

document.writeln('[ php] echo $imageData; [/php]');

hoffe, das hilft

Quelle

2017-11-29 13:52:25 seravee

Noch nicht ... document.getElementById ('imageData'). Value = "test"; Welche Datei Javascript? Unter der Funktion submit (außen) bewegen? –

Ich putted draußen (unten) ... und funktioniert ... Ich werde mehr Tests durchführen, um zu bestätigen. –

Submit-Funktion funktioniert nicht ... Ich muss dies verwenden, weil ich Daten von Grafiken bekommen muss: var imgData = ctx.toDataURL ("image/png"); –

Speichern Chartjs von Javascript in PHP per Formular

Antwort

Verwandte Themen