通过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中文乱码
Nov 26 PHP
php 5.3.5安装memcache注意事项小结
Apr 12 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
Jul 15 PHP
如何用php生成扭曲及旋转的验证码图片
Jun 07 PHP
自己写的php curl库实现整站克隆功能
Feb 12 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
Mar 09 PHP
PHP怎样用正则抓取页面中的网址
Aug 09 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
Dec 07 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
Sep 27 PHP
PHP日志LOG类定义与用法示例
Sep 06 PHP
Laravel 6.2 中添加了可调用容器对象的方法
Oct 22 PHP
PHP扩展安装方法步骤解析
Nov 24 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
PHP输出时间差函数代码
2013/01/28 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
jquery中动态效果小结
2010/12/16 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
中学门卫岗位职责
2013/12/26 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
清明节随笔
2015/08/15 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python