通过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上传图片类(随机名,缩略图,加水印)
Jun 30 PHP
php设计模式 State (状态模式)
Jun 26 PHP
php权重计算方法代码分享
Jan 09 PHP
php第一次无法获取cookie问题处理
Dec 15 PHP
PHP实现动态web服务器方法
Jul 29 PHP
php fseek函数读取大文件两种方法
Oct 12 PHP
关于PHP中字符串与多进制转换函数的实例代码
Nov 03 PHP
PHP yii实现model添加默认值的方法(两种方法)
Nov 10 PHP
thinkPHP交易详情查询功能详解
Dec 02 PHP
PHP getDocNamespaces()函数讲解
Feb 03 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
Feb 25 PHP
PHP常用函数之base64图片上传功能详解
Oct 21 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 购物车的例子
2009/05/04 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python实现的计数排序算法示例
2017/11/29 Python
python画折线图的程序
2018/07/26 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
python实现横向拼接图片
2020/03/23 Python
python中pop()函数的语法与实例
2020/12/01 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
动物学专业毕业生求职信
2013/10/11 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
仓库主管岗位职责
2014/03/02 职场文书
119消防日活动总结
2014/08/29 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
电影建党伟业观后感
2015/06/01 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
Ruby处理CSV数据方法详解
2022/04/18 Ruby