php+ajax+highchart+json绘图

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 RDS MySQL,高可用系列 2核4GB
简介: php+ajax+highchart+json绘图

 

一、目录介绍

  • chart.html:用来展示图表
  • paintchart.js:绘制图表
  • getjsondata.php:用来获取json格式的数据


二、数据库

image.png


三、代码展示

chart.html

<div id="departchart" style="min-width:400px;height:400px"></div>


paintchart.js

 $.ajax({
            type: "get", //请求方式
            url: "getjsondata.php", //请求地址
            dataType: "Json", //传输的参数,json格式的数据
            success: function(data) { //服务器返回的数据
                $.each(data, function(key, val) {
                    chartdata.push(val);
                })//将数据转为[[],[],[]]格式
                $('#departchart').highcharts({//调用highchart
                    chart: {
                        type: 'column'      
                    },
                    title: {
                        text: '各学院教职工总数'
                    },
                    subtitle: {
                        text: '数据截止 2017-11'
                    },
                    xAxis: {
                        type: 'category',
                        labels: {
                            rotation: -45,
                            style: {
                                fontSize: '13px',
                                fontFamily: 'Verdana, sans-serif'
                            }
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '人数 (位)'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    tooltip: {
                        pointFormat: '总人数: <b>{point.y:.1f} 位</b>'
                    },
                    series: [{
                        name: '总人数',
                        data: chartdata,
                        dataLabels: {
                            enabled: true,
                            rotation: -90,
                            color: '#FFFFFF',
                            align: 'right',
                            format: '{point.y:.1f}', // one decimal
                            y: 10, // 10 pixels down from the top
                            style: {
                                fontSize: '13px',
                                fontFamily: 'Verdana, sans-serif'
                            }
                        }
                    }]
                }); //endchart
            } //endsuccess
        }); //endajax

getjsondata.php

 <?php
        header("Content-type: text/json");
        $servername = "localhost";
        $username   = "";
        $password   = "";
        $dbname     = "";
        // 创建连接
        $con = mysqli_connect($servername, $username, $password, $dbname);
        // 检测连接
        $sql    = " select distinct department ,count(department) from workinfo group by department ";
        $result = mysqli_query($con, $sql);
        if (!$result) {
            printf("Error: %s\n", mysqli_error($con));
            exit();
        }
        while ($rows = mysqli_fetch_array($result, MYSQL_ASSOC)) {      
            $arr[] = array(
                $rows['department'], intval($rows['count(department)']),
            );
        }
        $data = json_encode($arr, JSON_UNESCAPED_UNICODE);
        echo $data;
        mysqli_close($con);


四、效果展示

image.png


相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
7天前
|
XML 前端开发 JavaScript
34 PHP与Ajax
路老师在知乎上分享了关于PHP语言的知识,帮助大家入门并深入了解PHP。本文重点介绍了Ajax技术,包括其概念、开发模式、优点及常用技术,如JavaScript和XMLHttpRequest对象。Ajax通过异步请求改善了用户体验,减轻了服务器负担,实现了页面无刷新更新。
21 1
|
15天前
|
JSON 缓存 前端开发
PHP如何高效地处理JSON数据:从编码到解码
在现代Web开发中,JSON已成为数据交换的标准格式。本文探讨了PHP如何高效处理JSON数据,包括编码和解码的过程。通过简化数据结构、使用优化选项、缓存机制及合理设置解码参数等方法,可以显著提升JSON处理的性能,确保系统快速稳定运行。
|
2月前
|
XML 前端开发 JavaScript
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
本文介绍了在PHP中如何使用Ajax进行登录表单的数据提交,并利用jQuery的$.post()方法与后端通信,以及使用layer.msg进行前端提示。
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
|
2月前
|
JSON 前端开发 JavaScript
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
Filter过滤器、Listener监听器、AJAX、 同步、异步优点和使用场景、Axios异步框架、JSON、js和JSON转换、案例,Axios + JSON 品牌列表查询和添加
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
|
3月前
|
JSON 前端开发 JavaScript
php中JSON或数组到formData的键值对转换
转换JSON或数组到formData格式的键值对并不复杂。PHP的 `json_decode()`与 `http_build_query()`是实现这一转换过程的关键函数。理解这个转换过程对于开发中处理各种AJAX请求时调整数据格式至关重要。这样,无论是处理来自客户端的JSON字符串,还是服务器端的数组数据,都能够灵活地转换为适合网络传输的格式,确保数据交换的顺畅和高效。
89 4
|
3月前
|
XML JSON 前端开发
JSON与AJAX:网页交互的利器
JSON与AJAX:网页交互的利器
37 0
|
5月前
|
JSON PHP 数据格式
蓝易云 - PHP用CURL发送Content-type为application/json的POST请求方法
在这段代码中,我们首先创建了一个包含我们要发送的数据的数组,并使用 `json_encode`函数将其转换为JSON格式。然后,我们初始化了一个cURL会话,并设置了一些选项,包括POST请求方法、要发送的数据、返回结果和HTTP头部信息。最后,我们执行了cURL请求并关闭了会话。
139 2
|
5月前
|
PHP
php+ajax传file文件数据
php+ajax传file文件数据
45 0
|
5月前
|
XML JSON 前端开发
第十一篇JavaScript JSON与AJAX
第十一篇JavaScript JSON与AJAX
31 0
|
6月前
|
XML JSON 前端开发
Ajax – JSON入门指南
Ajax – JSON入门指南
56 1