通过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和AJAX创建RSS聚合器的代码
Mar 13 PHP
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
May 26 PHP
PHP 强制性文件下载功能的函数代码(任意文件格式)
May 26 PHP
PHP中遍历stdclass object的实现代码
Jun 09 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
Oct 03 PHP
深入分析php之面向对象
May 15 PHP
php curl基本操作详解
Jul 23 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
Aug 23 PHP
PHP错误处理函数register_shutdown_function使用示例
Jul 03 PHP
Yii2 中实现单点登录的方法
Mar 09 PHP
laravel 事件/监听器实例代码
Apr 12 PHP
PHP实现简易用户登录系统
Jul 10 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目录与文件操作
2011/12/30 PHP
php学习笔记之基础知识
2014/11/08 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
Python 在函数上添加包装器
2020/07/28 Python
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
公司出纳岗位职责
2013/12/07 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
简易版租房协议书范本
2014/10/13 职场文书
结婚保证书
2015/01/16 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书