How to dynamically transfer data to highcharts in php-PHP Tutorial-php.cn

How to dynamically transfer data to highcharts in php

墨辰丷

Release： 2023-03-27 18:46:02

Original

1711 people have browsed it

This article mainly introduces the relevant knowledge of dynamically transferring data to highcharts through php. Has very good reference value.

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, Download address: http://xiazai.jb51.net/201703/yuanma/WampServer_2.5_jb51.rar, The browser opens localhost, and the file is stored in the wamp/www directory

3: PHP code, there is no process of writing real-time requests 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

<!DOCTYPE HTML>
<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">
 <link rel="icon" href="https://static.jianshukeji.com/hcode/images/favicon.ico">
 <style>
 </style>
 <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
 <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
 <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
 <script src="https://img.hcharts.cn/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 and modify the data column parameter plotOptions in highcharts to display different graphics. Graphics, highcharts can display graphic 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:

The above is the entire content of this article, I hope it will help everyone learn Helps.

Related recommendations:

PHPAcquisition of login session

Usage analysis of bind_param() function in php

PHPHow to determine whether the custom function is submitted for Get, Post and Ajax

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