通过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 相关文章推荐
实时抓取YAHOO股票报价的代码
Oct 09 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
Oct 19 PHP
php函数的常用方法及注意之处小结
Jul 10 PHP
php中serialize序列化与json性能测试的示例分析
Apr 27 PHP
php继承中方法重载(覆盖)的应用场合
Feb 09 PHP
学习php设计模式 php实现抽象工厂模式
Dec 07 PHP
PHP HTTP 认证实例详解
Nov 03 PHP
Zend Framework上传文件重命名的实现方法
Nov 25 PHP
php-beanstalkd消息队列类实例分享
Jul 19 PHP
启用OPCache提高PHP程序性能的方法
Mar 21 PHP
PHP文件后缀不强制为.php方法
Mar 31 PHP
PHP Pipeline 实现中间件的示例代码
Apr 26 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 函数使用方法与函数定义方法
2010/05/09 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
vue自动化表单实例分析
2018/05/06 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[00:11]战神迅矛
2019/03/06 DOTA
python实现rest请求api示例
2014/04/22 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
python空元组在all中返回结果详解
2020/12/15 Python
法学专业个人求职信
2013/09/26 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
劳资人员岗位职责
2013/12/19 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
python字符串的一些常见实用操作
2022/04/06 Python