通过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 相关文章推荐
建立动态的WML站点(二)
Oct 09 PHP
PHP详细彻底学习Smarty
Mar 27 PHP
PHP 组件化编程技巧
Jun 06 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
Sep 24 PHP
php常用的url处理函数总结
Nov 19 PHP
php实现约瑟夫问题的方法小结
Mar 23 PHP
php使用MySQL保存session会话的方法
Jun 18 PHP
PHP根据图片色界在不同位置加水印的方法
Jul 01 PHP
PHP 实现页面静态化的几种方法
Jul 23 PHP
php strftime函数的详细用法
Jun 21 PHP
laravel 模型查询按照whereIn排序的示例
Oct 16 PHP
laravel框架创建授权策略实例分析
Nov 22 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统计二维数组元素个数的方法
2013/11/12 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python监测当前联网状态并连接的实例
2018/12/18 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
python实现串口自动触发工作的示例
2019/07/02 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
运动会广播稿200字
2014/01/15 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
画展观后感
2015/06/17 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书