Explication détaillée de la façon de transférer dynamiquement des données vers des highcharts via php-tutoriel php-php.cn

Explication détaillée de la façon de transférer dynamiquement des données vers des highcharts via php

*文

Libérer： 2023-03-19 06:38:01

original

1378 Les gens l'ont consulté

Cet article présente principalement les connaissances pertinentes sur le transfert dynamique de données vers des highcharts via php. A une très bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous

1 : Dans le travail quotidien, lors de l'affichage des données, la chaîne json est obtenue directement via l'interface fournie par l'arrière-plan pour l'affichage. Aujourd'hui, quelqu'un a demandé comment démontrer localement les données dynamiques demandées.

2 : Configurer l'environnement localement, j'utilise WampServer, Ouvrez localhost dans le navigateur, et les fichiers sont stockés dans le répertoire wamp/www

3 : Code PHP, il n'y a pas de processus d'écriture de requêtes en temps réel dans la base de données.

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

Copier après la connexion

4 : fichier html

Les fichiers liés aux Highcharts peuvent être téléchargés et importés par vous-même.

<!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>

Copier après la connexion

5 : Ici, introduisez le fichier js Lorsque vous devez afficher la même chaîne json sous différents graphiques, modifiez le type dans la série At. en même temps, vous pouvez afficher différents graphiques en modifiant les paramètres de la colonne de données plotOptions dans les highcharts peuvent afficher les types de graphiques.

format de données de retour php : [{"name":"u5317u4eac","y":20.2},{"name":"u4e0au6d77"," y":9.6},{"name":"u6b66u6c49","y":16.6}], lorsque les données demandées doivent être traitées, par exemple, lorsqu'une seule partie des données est nécessaire, vous pouvez demander les données via get, Traiter le tableau passé :