suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  Ausführliche Erklärung, wie man Daten dynamisch über PHP an Highcharts überträgt

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

*文
*文Original
2018-01-03 09:53:061371Durchsuche

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);
?>

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>

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!

php 架构 json html 字符串 接口 JS 数据库
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erklärung, wie PHP Gruppen mit demselben Wert in einem Array ermöglicht, ein neues Array zu bildenNächster Artikel：Detaillierte Erklärung, wie PHP Gruppen mit demselben Wert in einem Array ermöglicht, ein neues Array zu bilden

In Verbindung stehende Artikel

Mehr sehen