Detailed explanation of how to dynamically transfer data to highcharts through php-PHP Tutorial-php.cn

Detailed explanation of how to dynamically transfer data to highcharts through php

*文

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

Original

1298 people have browsed it

This article mainly introduces the relevant knowledge of dynamically transferring data to highcharts through php. Has very good reference value. Let’s take a look with the editor below

1: In daily work, when displaying data, the json string is obtained directly through the interface provided by the background for display. Today someone asked how to demonstrate the requested dynamic data locally.

2: Set up the environment locally, I use WampServer, open localhost in the browser, and the files are stored in the wamp/www directory

3: PHP code does not write the process of real-time request to the database.

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

Copy after login

4: html file

Highcharts related files can be downloaded and imported by yourself.

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

Copy after login

5: Here, introduce the js file. When you need to display the same json string as different graphics, modify the type attribute in the series. At the same time, modify the data column parameter plotOptions in highcharts to display different graphics. Highcharts can display graphics types.

php returns data format: [{"name":"\u5317\u4eac","y":20.2},{"name":"\ u4e0a\u6d77","y":9.6},{"name":"\u6b66\u6c49","y":16.6}], when the requested data needs to be processed, such as when only part of the data is needed , you can process the passed array when requesting data through get:

Related recommendations:

A brief analysis of json transmission in php and js

PHP briefly talks about the decoupling of code architecture

PHP generates a readable random string

The above is the detailed content of Detailed explanation of how to dynamically transfer data to highcharts through php. For more information, please follow other related articles on the PHP Chinese website!