2016-05-31 7 views
2

Erstes Plakat, und immer noch relativ neu zu Javascript ... Ich versuche herauszufinden, wie Informationen aus einer PHP-Datei in eine canvasjs-Datei zu reflektieren.So rufen Sie eine PHP-Datei zu canvasjs

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"> </script> 
<script type="text/javascript"> 

window.onload = function() { 
    var chart = new CanvasJS.Chart("chartContainer", { 
     title:{ 
      text: "My First Chart in CanvasJS"    
     }, 
     data: [    
     { 
      type: 'line', 
      dataPoints: [ 
       { label: "2014/1/2", y: 60, x: 2 }, 
      ] 
     },    
     { 
      type: 'line', 
      dataPoints: [ 
       { label: "2014/1/2", y: 0, x: 2 }, 
      ] 
     } 
     ] 
    }); 
    chart.render(); 
} 
</script> 
</head> 
<body> 
<div id="chartContainer" style="height: 300px; width: 100%;"></div> 
</body> 
</html> 

Anstelle der Etiketten und Datenpunkte usw., mag ich Informationen aus einer PHP-Datei (oder wie es auf jede Art von Datei zu tun), um dann in diese canvasjs Datei angezeigt gesammelt werden.

Gibt es eine Möglichkeit, dies zu tun?

Sorry, wenn ich bin mir nicht klar, ich schätze wirklich jede Hilfe, die ich :)

Dank bekommen!

Antwort

3

Eine Möglichkeit wäre es, die Datei, die Sie eine PHP-Datei eingefügt zu machen, dann verwenden PHP drin:

<?php 

$dataPoints = [ [ "label" => "2014/1/2", y => 0, x => 2 ] ]; 

?> 
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"> </script> 
<script type="text/javascript"> 

window.onload = function() { 
    var chart = new CanvasJS.Chart("chartContainer", { 
     title: { 
      text: "My First Chart in CanvasJS"    
     }, 
     data: [    
      { 
       type: 'line', 
       dataPoints: <?php echo json_encode($dataPoints) ?> 
      },    
      { 
       type: 'line', 
       dataPoints: <?php echo json_encode($dataPoints) ?> 
      } 
     ] 
    }); 
    chart.render(); 
} 
</script> 
</head> 
<body> 
<div id="chartContainer" style="height: 300px; width: 100%;"></div> 
</body> 
</html> 

Eine weitere Möglichkeit, eine PHP-Datei zu erstellen wäre, die die Daten zurückgibt, und macht ein AJAX-Anfrage:

data.php:

<?php 

$dataPoints = [ [ "label" => "2014/1/2", y => 0, x => 2 ] ]; 

echo json_encode($dataPoints); 

ui.html:

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"> </script> 
<script type="text/javascript"> 

window.onload = function() { 
    var request = new XMLHttpRequest(); 

    request.onload = function() { 
     var dataPoints = JSON.parse(request.responseText); 

     var chart = new CanvasJS.Chart("chartContainer", { 
      title: { 
       text: "My First Chart in CanvasJS"    
      }, 
      data: [    
       { 
        type: 'line', 
        dataPoints: dataPoints 
       },    
       { 
        type: 'line', 
        dataPoints: dataPoints 
       } 
      ] 
     }); 
     chart.render(); 
    }; 

    request.open('GET', 'data.php', true); 
    request.send(); 
} 
</script> 
</head> 
<body> 
<div id="chartContainer" style="height: 300px; width: 100%;"></div> 
</body> 
</html> 
+0

Hallo los zu werden, habe ich versucht, die erste Lösung, die Sie mir gegeben haben und es funktioniert :) Awesome! Tausend Dank!! Aber die zweite Lösung schien nicht zu funktionieren ... Ich habe die Top-Tags (Körper, HTML usw.) ersetzt und dafür gesorgt, dass die PHP-Datei mit endete?> Aber kein Glück>< – tttt

+0

Oh vergiss es, ich habe es funktioniert !!! Genial!!! – tttt

Verwandte Themen