highcharts php 动态数据,php动态传数据到highcharts的方法

本文主要介绍了通过php动态传数据到highcharts的相关知识。具有很好的参考价值。

1:在平时工作中,在对数据进行展示的时候,是直接通过后台提供的接口来获取json串,用来展示。今天别人问怎么在本地演示一下请求的动态数据。

2:在本地搭建环境,我用的WampServer,下载地址:http://xiazai.jb51.net/201703/yuanma/WampServer_2.5_jb51.rar,浏览器打开localhost,文件存放在wamp/www目录下

1c024899efafec1f571cd456440f36a1.png

3: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文件

$(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}: {point.percentage:.1f}%'

},

plotOptions: {

pie: {

allowPointSelect: true,

cursor: 'pointer',

dataLabels: {

enabled: true,

color: '#000000',

connectorColor: '#000000',

formatter: function() {

return ''+ this.point.name +': '+ this.percentage +' %';

}

}

}

},

series: [{

type: 'line',

name: '',

data: csv,

}]

});

});

});

5:在这里,引入js文件,当需要对一个相同的json串展示为不同的图形时,修改series里的type属性,同时修改highcharts里的数据列参数plotOptions,就可以展示不同的图形了,highcharts可显示图形类型。

7c303917b76b2412ee50ef46007c1e02.png

php返回数据格式:[{"name":"\u5317\u4eac","y":20.2},{"name":"\u4e0a\u6d77","y":9.6},{"name":"\u6b66\u6c49","y":16.6}],当需要对请求的数据进行处理时,比如只需要其中一部分的数据时,可以在通过get请求数据时,对传过来的数组进行处理:

4315161224be86825a782062771c645b.png

以上就是本文的全部内容,希望对大家的学习有所帮助。

相关推荐:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/560076.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

asm 5 java,java – 使用ASM(5.x)在字节代码中检测运行时的递归方法调用:howto?

问题如下;Java代码中的方法是:Rule foo(){return sequence(foo(), x());}这将引发解析循环,当然应该避免;但是,这是合法的:Rule foo(){return sequence(x(), foo());}现在,代码中的其他地方我可以访问RuleMethod,这是一个扩展MethodNode的类,因此我可以访…

mysql外键设置sql语句,SQL Server 2008之SQL语句外键

xin3721网络学院为广大学员,准备了丰富了教学视频。为了更好的让大学配合视频进行学习,拓展学员的知识面,我站特整理了大量的,技术文章,供学员参考。因此本教案需配合视频教程学习,视频教程地址为&#xff…

nginx index.php 端口,请教下 nginx 配置域名反代到本地端口这里面应该怎么加。

域名 1.31.tw 怎么添加反代可以正常访问 127.0.0.1:5000 端口? 我自己加的反代在域名开启 ssl 下 css 不正常,错位。弄一天了没弄明白,求大佬。谢谢下面是配置文件:server {listen 80;listen 443 ssl http2;ssl_certificate /usr/local/ngin…

php tar.gz文件,PHP解压tar.gz格式文件的方法,_PHP教程

PHP解压tar.gz格式文件的方法,本文实例讲述了PHP解压tar.gz格式文件的方法。分享给大家供大家参考,具体如下:1、运用php自带压缩与归档扩展(phar)$phar new PharData(song.tar.gz);//路径 要解压的文件 是否覆盖$phar->extractTo(c:/tmp,…

java 像素级碰撞检测,» 像素级碰撞检测类

//像素级碰撞检测package{import flash.display.BitmapData;import flash.display.BlendMode;import flash.display.DisplayObject;import flash.display.Sprite;import flash.geom.ColorTransform;import flash.geom.Matrix;import flash.geom.Point;import flash.geom.Rectan…

matlab暂态信号,MATLAB6在电力暂态波形仿真实现中的应用

1概述现代继电保护不但要测量电力系统稳态情况下的特性,还要测量电子系统暂态情况下的特性。对绝大多数保护装置来说,不可能利用实际电力系统的人工短路试验来检验其性能。继电保护试验设备应具有仿真能力,能模拟电力系统发生各种故障和不正常状态时的暂态过程,特别是严重畸变的…

创建数组表格PHP苹果价格,如何从PHP数组创建HTML表?

Cats萌萌这是我的&#xff1a;<?php function build_table($array){ // start table $html . htmlspecialchars($key) . . htmlspecialchars($value2) .

python打包exe报错编码问题,使用Python打包含有pymssql成exe所躺的坑

一、如何打包Python打包exe文件简单运用pyinstaller库就行了1)安装pyinstaller库(自行安装)2)winR打开运行窗口输入“powershell”3)输入pyinstaller -F 路径\文件名.py(打包py文件的路径&#xff0c;py不能省略)看到successfully即为打包成功&#xff0c;但不一定能运用的&…

centos 6.5装mysql 5.7,centos 6.5装mysql5.7

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼报错er-5.7.17-1.el7.i686 需要--> 处理依赖关系 libc.so.6(GLIBC_2.17)&#xff0c;它被软件包 mysql-community-server-5.7.17-1.el7.i686 需要--> 完成依赖关系计算错误&#xff1a;Package: mysql-community-client-5.7.…

php超大树形分页,PHP+MySql千万级数据limit分页优化方案

PHPMySql千万级数据limit分页优化方案1年前阅读 2750评论 0喜欢 0### 原因徒弟突然有个需求&#xff0c;就是他发现limit分页&#xff0c;页数越大之后&#xff0c;mysql的消耗越大&#xff0c;查询时间越长&#xff0c;当突破百万级数据之后&#xff0c;一个简单的翻页都需要5…

oracle数据库连接满了,ORACLE数据库连接数满的分析及优化

最近在使用Oracle的过程中&#xff0c;出现了数据库连接数满的情况&#xff0c;导致程序及数据库连接工具连接不上。主要从两个方面来考虑这件事&#xff0c;从程序方面来看&#xff1a;1.进行数据库连接操作后未释放连接&#xff1b;2.若使用了数据库连接池&#xff0c;则考虑…

oracle移动硬盘盒,oracle-linux下挂载移动硬盘 NTFS类型

环境&#xff1a;ORACLE-LINUX 5.7全新移动硬盘(未使用过)移动硬盘空间3T在默认情况下&#xff0c;Linux系统不支持NTFS分区挂载1、服务器&#xff1a;A服务器和B服务器为一套ORACLE-RAC&#xff0c;移动硬盘插在A服务器上&#xff1b;2、下载ntfs-3g包&#xff0c;在A服务器上…

linux自启动配置文件,Linux中如何设置服务自启动?

有时候我们需要Linux系统在开机的时候自动加载某些脚本或系统服务&#xff0c;主要用三种方式进行这一操作&#xff1a;ln -s 在/etc/rc.d/rc*.d目录中建立/etc/init.d/服务的软链接(*代表0&#xff5e;6七个运行级别之一)chkonfig 命令行运行级别设置nts…

linux系统下升级node,linux下安装指定版本的nodejs(升级到指定版本)

原因最近需要全栈开发但是服务器是linux系统&#xff0c;服务本身通过yum安装软件包&#xff0c;不过yum安装的nodejs版本太低。所以需要自己安装。方案下载编译好的文件解压后直接运行即可&#xff0c;不过我们需要全局运行node命令。只需要把目录设置为全局即可(建立软链接 l…

Linux bash卸载软件,Ubuntu卸载软件的4种方法

前言本文重点介绍Ubuntu卸载软件的4种方法。他们分别是图形化界面的synaptic、自动解决依赖关系的apt-get&#xff0c;处理依赖关系更强大的aptitude&#xff0c;还有安装本地deb包的dpkg。方法一: Ubuntu使用synaptic图形化界面管理软件oucanrongzcwyou:~$ sudo apt-get insta…

linux系统atom安装教程,Ubuntu/Linux Mint上安装Atom文本编辑器

Atom是一款由Github开发的开源文本编辑器&#xff0c;虽然目前该软件依然在Beta阶段&#xff0c;但我们依然可以在你的Ubuntu/Linux Mint上使用它。据Atom官方博客介绍&#xff0c;与Atom类似的编辑器Sublime和TextMate都深受开发者欢迎&#xff0c;但在扩展性上都有所限制&…

linux替换windows回车,转载 vi替换windows换行符为linux换行符

1.用vi打开指定文本文件&#xff1a;vi filename.c2.按 Esc 键&#xff0c;进入命令模式&#xff1b;3.按 : 键 (按 Shift 键不放后&#xff0c;同时按 : 键)进入命令输入状态&#xff1b;4.在冒号后输入&#xff1a;%s/^M//g注&#xff1a;^M是一个字符不是输入^和M两个字符&a…

ausam3x 嵌入式linux,ATSAM3X8EA-AU - 微控制器, 32位, SAM3X系列, ARM 皮质-M3, 84nb

ATSAM3X8EA-AU -微控制器, 32位, SAM3X系列, ARM 皮质-M3, 84 MHz,512 KB, 96 KB, 144 引脚, LQFPTheATSAM3X8EA-AU is a Flash Microcontroller, based on the highperformance 32-bit ARM Cortex-M3 RISC processor. It operates at amaximum speed of 84MHz and features up…

网络编程与分层协议设计:基于linux平台实现,网络编程与分层协议设计:基于Linux平台实现...

图书简介本书以Linux网络套接字编程和网络分层协议的设计与程序实现为主题&#xff0c;详细介绍如何在Linux平台下进行套接字程序设计&#xff0c;并给出了一个基于分层协议的应用实例&#xff0c;用于模拟Linux网络协议栈中IP层的核心功能—IP报文的分段和重组过程。本书旨在通…

labview 远程连接linux,SSH交互式通信总结:expect、plink、putty、sshpass、ALAB SSH

关于在linux脚本中远程执行命令的问题&#xff0c;笔者在以前文章中可以使用expect工具来完成交互式通信。在windows平台下可以使用plink或者putty工具。免密也可以设置SSH秘钥&#xff0c;参考文章-Linux怎么远程执行指令呢-SSH秘钥。但是在linux下需要一一对应设置&#xff0…