php+ajax+highchart+json绘图

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS PostgreSQL,集群系列 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
相关文章
|
4月前
|
JSON 前端开发 JavaScript
|
1月前
|
JSON 前端开发 JavaScript
php中JSON或数组到formData的键值对转换
转换JSON或数组到formData格式的键值对并不复杂。PHP的 `json_decode()`与 `http_build_query()`是实现这一转换过程的关键函数。理解这个转换过程对于开发中处理各种AJAX请求时调整数据格式至关重要。这样,无论是处理来自客户端的JSON字符串,还是服务器端的数组数据,都能够灵活地转换为适合网络传输的格式,确保数据交换的顺畅和高效。
43 4
|
15天前
|
XML JSON 前端开发
JSON与AJAX:网页交互的利器
JSON与AJAX:网页交互的利器
21 0
|
3月前
|
JSON PHP 数据格式
蓝易云 - PHP用CURL发送Content-type为application/json的POST请求方法
在这段代码中,我们首先创建了一个包含我们要发送的数据的数组,并使用 `json_encode`函数将其转换为JSON格式。然后,我们初始化了一个cURL会话,并设置了一些选项,包括POST请求方法、要发送的数据、返回结果和HTTP头部信息。最后,我们执行了cURL请求并关闭了会话。
86 2
|
3月前
|
PHP
php+ajax传file文件数据
php+ajax传file文件数据
31 0
|
3月前
|
XML JSON 前端开发
第十一篇JavaScript JSON与AJAX
第十一篇JavaScript JSON与AJAX
22 0
|
4月前
|
XML JSON 前端开发
Ajax – JSON入门指南
Ajax – JSON入门指南
32 1
|
4月前
|
前端开发 JavaScript PHP
【PHP开发专栏】jQuery与PHP实现Ajax通信
【4月更文挑战第30天】本文介绍了使用jQuery和PHP实现Ajax通信的步骤。首先,讲解了Ajax的基础和jQuery简化Ajax操作的概念。接着,展示了如何使用jQuery的`$.get()`、`$.post()`和`$.ajax()`方法发送GET和POST请求,以及如何控制请求细节。在PHP端,讨论了接收和响应Ajax请求的方法,包括处理数据、设置响应类型和错误处理。结合jQuery与PHP,开发者能实现高效、无缝的异步数据传输,提升Web应用的用户体验。
78 1
|
4月前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框
|
4月前
|
XML 前端开发 JavaScript
【PHP 开发专栏】PHP 与 Ajax 交互开发
【4月更文挑战第30天】本文探讨了PHP与Ajax交互在Web开发中的应用。Ajax负责客户端的异步请求,PHP处理服务器端业务逻辑。两者结合实现高效、流畅的用户体验。文中阐述了Ajax的工作原理,PHP的角色,数据传输格式选择,并提供了发送Ajax请求、PHP处理请求的示例代码。实际应用包括实时数据更新、表单验证和动态内容加载。开发中需注意跨域、数据安全和性能优化。PHP与Ajax的结合将继续在Web开发中发挥重要作用。
48 0
下一篇
DDNS