通过php动态传数据到highcharts


Posted in PHP onApril 05, 2017

1:在平时工作中,在对数据进行展示的时候,是直接通过后台提供的接口来获取json串,用来展示。今天别人问怎么在本地演示一下请求的动态数据。

2:在本地搭建环境,我用的WampServer,下载地址:http://xiazai.3water.com/201703/yuanma/WampServer_2.5_3water.rar,浏览器打开localhost,文件存放在wamp/www目录下

通过php动态传数据到highcharts

3:php代码,没有写与数据库实时请求的过程。

<?php
 $b = array(
 array('name'=>'北京', 'y'=>20.2),
 array('name'=>'上海', 'y'=>9.6),
 array('name'=>'武汉', 'y'=>16.6),
 );
 $data = json_encode($b);
 echo($data);
?>

4:html文件

<!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">
 <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>
 <div id="container" style="min-width:400px;height:400px"></div>
 <script>
 $(function () {
 $.getJSON('http://localhost/index-1.php', function (csv) {
  console.log(csv)
  $('#container').highcharts({
  chart: {
  plotBackgroundColor: null,
  plotBorderWidth: null,
  plotShadow: false
  },
  title: {
  text: ''
  },
  tooltip: {
  pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
  pie: {
  allowPointSelect: true,
  cursor: 'pointer',
  dataLabels: {
   enabled: true,
   color: '#000000',
   connectorColor: '#000000',
   formatter: function() {
   return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
   }
  }
  }
  },
  series: [{
  type: 'line',
  name: '',
  data: csv,
  }]
  });
 });
 });
 </script>
 </body>
</html>

5:在这里,引入js文件,当需要对一个相同的json串展示为不同的图形时,修改series里的type属性,同时修改highcharts里的数据列参数plotOptions,就可以展示不同的图形了,highcharts可显示图形类型。

通过php动态传数据到highcharts

php返回数据格式:[{"name":"\u5317\u4eac","y":20.2},{"name":"\u4e0a\u6d77","y":9.6},{"name":"\u6b66\u6c49","y":16.6}],当需要对请求的数据进行处理时,比如只需要其中一部分的数据时,可以在通过get请求数据时,对传过来的数组进行处理:

通过php动态传数据到highcharts

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

PHP 相关文章推荐
收集的PHP中与数组相关的函数
Mar 22 PHP
分页详解 从此分页无忧(PHP+mysql)
Nov 23 PHP
PHP变量内存分配问题记录整理
Nov 27 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
Jan 24 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
Feb 02 PHP
PHP中使用localhost连接Mysql不成功的解决方法
Aug 20 PHP
php使用递归计算文件夹大小
Dec 24 PHP
使用XHGui来测试PHP性能的教程
Jul 03 PHP
PHP弹出对话框技巧详细解读
Sep 26 PHP
php外部执行命令函数用法小结
Oct 11 PHP
laravel 创建命令行命令的图文教程
Oct 23 PHP
php微信小程序解包过程实例详解
Mar 31 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
Apr 04 #PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
Apr 04 #PHP
php实现用户登陆简单实例
Apr 04 #PHP
详谈phpAdmin修改密码后拒绝访问的问题
Apr 03 #PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
Apr 03 #PHP
THINKPHP在添加数据的时候获取主键id的值方法
Apr 03 #PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
Apr 03 #PHP
You might like
php使用qr生成二维码的示例分享
2014/01/20 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
php查询操作实现投票功能
2016/05/09 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
公司活动策划方案
2014/01/13 职场文书
销售经理竞聘书
2014/03/31 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
模范班主任事迹材料
2014/12/17 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
OpenCV实现普通阈值
2021/11/17 Java/Android