Home > Article > Backend Development > Detailed explanation of how to dynamically transfer data to highcharts through php

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

*文Original: 2018-01-03 09:53:061380browse

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

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>

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!

php 架构 json html 字符串接口 JS 数据库

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of how PHP allows groups of the same value in an array to form a new arrayNext article：Detailed explanation of how PHP allows groups of the same value in an array to form a new array

See more

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

Related articles