Ausführliche Erklärung, wie man Daten dynamisch über PHP an Highcharts überträgt-PHP-Tutorial-php.cn

Ausführliche Erklärung, wie man Daten dynamisch über PHP an Highcharts überträgt

*文

Freigeben： 2023-03-19 06:38:01

Original

1417 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich die relevanten Kenntnisse zur dynamischen Übertragung von Daten an Highcharts über PHP vorgestellt. Hat einen sehr guten Referenzwert. Werfen wir einen Blick mit dem Editor unten

1: Bei der täglichen Arbeit wird bei der Anzeige von Daten der JSON-String direkt über die vom Hintergrund zur Anzeige bereitgestellte Schnittstelle abgerufen. Heute hat jemand gefragt, wie man die angeforderten dynamischen Daten lokal demonstrieren kann.

2: Richten Sie die Umgebung lokal ein, ich verwende WampServer, Öffnen Sie localhost im Browser und die Dateien werden im Verzeichnis wamp/www gespeichert

3: PHP-Code, es gibt keinen Prozess zum Schreiben von Echtzeitanforderungen in die Datenbank.

<?php
 $b = array(
 array(&#39;name&#39;=>&#39;北京&#39;, &#39;y&#39;=>20.2),
 array(&#39;name&#39;=>&#39;上海&#39;, &#39;y&#39;=>9.6),
 array(&#39;name&#39;=>&#39;武汉&#39;, &#39;y&#39;=>16.6),
 );
 $data = json_encode($b);
 echo($data);
?>

Nach dem Login kopieren

4: HTML-Datei

Highcharts-bezogene Dateien können selbst heruntergeladen und importiert werden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <style>
 </style>
 <script src="jquery-1.8.3.min.js"></script>
 <script src="highcharts.js"></script>
 <script src="modules/exporting.js"></script>
 <script src="highcharts-plugins/highcharts-zh_CN.js"></script>
 </head>
 <body>
 <p id="container" style="min-width:400px;height:400px"></p>
 <script>
 $(function () {
 $.getJSON(&#39;http://localhost/index-1.php&#39;, function (csv) {
  console.log(csv)
  $(&#39;#container&#39;).highcharts({
  chart: {
  plotBackgroundColor: null,
  plotBorderWidth: null,
  plotShadow: false
  },
  title: {
  text: &#39;&#39;
  },
  tooltip: {
  pointFormat: &#39;{series.name}: <b>{point.percentage:.1f}%</b>&#39;
  },
  plotOptions: {
  pie: {
  allowPointSelect: true,
  cursor: &#39;pointer&#39;,
  dataLabels: {
   enabled: true,
   color: &#39;#000000&#39;,
   connectorColor: &#39;#000000&#39;,
   formatter: function() {
   return &#39;<b>&#39;+ this.point.name +&#39;</b>: &#39;+ this.percentage +&#39; %&#39;;
   }
  }
  }
  },
  series: [{
  type: &#39;line&#39;,
  name: &#39;&#39;,
  data: csv,
  }]
  });
 });
 });
 </script>
 </body>
</html>

Nach dem Login kopieren

5: Führen Sie hier die js-Datei ein. Wenn Sie dieselbe JSON-Zeichenfolge als verschiedene Grafiken anzeigen müssen, ändern Sie den Typ in der Serie At Gleichzeitig können Sie verschiedene Grafiken anzeigen, indem Sie den Datenspaltenparameter plotOptions in Highcharts ändern. Highcharts kann Grafiktypen anzeigen.

PHP-Rückgabedatenformat: [{"name":u5317u4eac",y":20.2},{"name":u4e0au6d77"," y":9.6},{"name":u6b66u6c49",y":16.6}]: Wenn die angeforderten Daten verarbeitet werden müssen, beispielsweise wenn nur ein Teil der Daten benötigt wird, können Sie die Daten über anfordern get, Verarbeiten Sie das übergebene Array:

Verwandte Empfehlungen:

json transfer in php and js A Kurze Analyse von

PHP spricht kurz über die Entkopplung der Codearchitektur

PHP generiert Features Lesbare Zufallszeichenfolge

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man Daten dynamisch über PHP an Highcharts überträgt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!