HIGHCHARTS
  • 关于我们
    • 关于我们
    • 联系方式
    • 新闻动态
    • 合作伙伴
  • 在线商店
  • 在线实例
    • Highcharts 演示
    • Highcharts Stock 演示
    • Highcharts Maps 演示
    • Highcharts Gantt 演示
    • 图集new
    • 客户案例
  • 文档教程
    • 使用教程
    • API 文档
    • 兼容性
    • 常见错误
    • 更新日志
  • 服务与支持
    • 获取技术支持
    • 下载中心
    • 地图数据
    • 产品规划
  • 产品中心
    • Highcharts
    • Highcharts Stock
    • Highcharts Map
    • Highcharts iOS
    • Highcharts Android
    • JShare
    • 爱图说
    • Highcharts 云服务
    • Highcharts 编辑器
    • 插件扩展
    • 应用扩展
  • 博客
  • 技术社区
  • 快速上手
    • Highcharts 系列软件简介
    • 1 分钟上手 Highcharts
    • 文件下载与使用
    • 通过 npm 安装
    • 通过 Bower 安装
    • 如何设置图表配置选项
    • Highcharts 兼容性
    • Highcharts 使用协议
  • 基础教程
    • 图表主要组成
    • 图表配置
    • 标题
    • 坐标轴
    • 数据列
    • 颜色
    • 数据提示框
    • 图例
    • 版权信息
    • HTML标签
    • 标示线
    • 标示带
    • 图表缩放
    • 语言文字
    • 标签及字符串格式化
    • 钻取功能
    • 3D 图表
    • 响应式
  • 数据处理
    • 数据处理概述
    • 服务端动态渲染图表
    • Ajax 请求数据接口
    • 处理文本或文本数据文件
    • 数据功能模块
  • 图表类型
    • 图表类型
    • 直线图
    • 曲线图
    • 面积图及面积范围图
    • 柱状图和条形图
    • 饼图
    • 范围图
    • 散点图及气泡图
    • 漏斗图及金字塔图
    • 极地图
    • 瀑布图
    • 误差线图
    • 箱线图
  • 高级特性
    • 堆叠图
    • 自由绘图
    • 国际化
  • 图表导出模块
    • 图表导出模块概述
    • 客户端导出
    • 搭建导出服务器
    • 命令行导出
    • 导出 Excel 数据文件
  • 图表设计及样式
    • 图表设计及样式
    • 颜色
    • 主题
  • 插件扩展
    • 插件扩展概述
    • 创建插件
    • 提交插件到官方插件库
  • 地图(Highmaps)
    • 开始使用 Highmaps
    • 地图数据集
    • 经纬度
    • 地图导航器
  • 股票图(Highstock)
    • 开始使用 Highstock
    • 范围选择器
    • 导航器
    • 滚动条
    • K 线图
    • 技术指标
    • 自定义技术指标
  • 官方扩展包(Vue React Angular iOS Android .NET)
    • Highcharts .NET
    • Highcharts Vue
    • Highcharts React
    • Highcharts Angular
    • Highcharts iOS
    • Highcharts Android
收起菜单 教程目录

Ajax 请求数据接口

最后修改时间:2018-07-30 11:39

Ajax 是一种不需要刷新页面就可以与服务器交换数据的方法。

关于 Ajax 相关的知识请参考 jQuery-Ajax、jQuery-AJAX - W3School 及 Ajax 教程

一、jQuery 中 Ajax 相关的函数

在 jQuery 中,有三种 Ajax 相关的方法,分别是:ajax、get、post。

1、jQuery.ajax

统一的发送 Ajax 请求函数,简单的使用示例如下:

$.ajax({
    url: '请求地址',
    type: 'GET',     // 请求类型,常用的有 GET 和 POST
    data: {          
        // 请求参数
    },
    success: function(data) { // 接口调用成功回调函数
        // data 为服务器返回的数据
    }
});

关于 jQuery.ajax 函数的详细使用请参考:jQuery 官方文档 及 jQuery Ajax ajax() 方法

2、jQury.get

发送 get 请求,是 ajax 方法的简写方式。

$.get(url, {
    // 参数
}, function(data) {
    // data 为服务器返回的数据
});

关于 jQuery.get 函数的详细使用请参考:jQuery 官方文档 及 jQuery Ajax get() 方法

3、jQuery.post

发送 post 请求,是 ajax 方法的简写方式。

$.post(url, {
    // 参数
}, function(data) {
    // data 为服务器返回的数据
});

关于 jQuery.post 函数的详细使用请参考:jQuery 官方文档 及 jQuery Ajax post() 方法

二、实例说明请求数据并创建图表

下面我们用具体的实例来说明这个过程:

1、 创建服务器接口

<?php
    // 指定返回格式为 JSON
    header("Content-type: text/json");

    // 获取当前时间,PHP 时间戳是秒为单位的,JS 中则是毫秒,所以这里乘以 1000
    $x = time() * 1000;
    // y 值为随机值
    $y = rand(0, 100);

    // 创建 PHP 数组,并最终用 json_encode 转换成 JSON 字符串
    $ret = array($x, $y);
    echo json_encode($ret);
?>

2、 初始化图表

var chart = null; // 定义全局变量
$(document).ready(function() {
  chart = Highcharts.chart('container', {
    chart: {
      type: 'spline',
      events: {
        load: requestData // 图表加载完毕后执行的回调函数
      }
    },
    title: {
      text: 'Live random data'
    },
    xAxis: {
      type: 'datetime',
      tickPixelInterval: 150,
      maxZoom: 20 * 1000
    },
    yAxis: {
      minPadding: 0.2,
      maxPadding: 0.2,
      title: {
        text: 'Value',
        margin: 80
      }
    },
    series: [{
      name: '随机数据',
      data: []
    }]
  });
});

3、 调用数据接口并更新图表

/**
 * Ajax 请求数据接口,并通过 Highcharts 提供的函数进行动态更新
 * 接口调用完毕后间隔 1 s 继续调用本函数,以达到实时请求数据,实时更新的效果
 */
function requestData() {
  $.ajax({
    url: 'live-server-data.php',
    success: function(point) {
      var series = chart.series[0],
        shift = series.data.length > 20; // 当数据点数量超过 20 个,则指定删除第一个点

      // 新增点操作
      //具体的参数详见:https://api.hcharts.cn/highcharts#Series.addPoint
      chart.series[0].addPoint(point, true, shift);

      // 一秒后继续调用本函数
      setTimeout(requestData, 1000);
    },
    cache: false
  });
}

三、注意事项

1、数据类型

注意请确保数据接口返回的数据是 JSON 对象的形式,如果返回的数据是 JSON 字符串,我们可以用 JS 转换一下,说明如下

图3-1 JS 类型及 JSON 转换

即在 JS 中,用 typeof 来判断类型,字符串类型为 "string",对象类型为 "object"; 我们可以用 JSON.parse() 来将 JSON 字符串转换成 JSON 对象,用 JSON.stringify() 来将 JSON 对象转换成 JSON 字符串。

3、跨域问题

由 JavaScript 出于安全方面的考虑,不允许跨域调用其他页面的对象,所以在跨域调用数据接口时,我们需要注意跨域的问题。

关于跨域请大家自行了解相关的内容,我们也会在后面的教程中说明这个问题。

版权声明

本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。

标题:Ajax 请求数据接口 | Highcharts 使用教程

链接:https://www.hcharts.cn/docs/ajax/

   上一篇 下一篇   
  目录
    简数科技微信,同步更新Highcharts教程

    订阅更新

    © 2022 Highcharts 中文官网, 由 简数科技 提供服务, 浙ICP备16004892号-6, 浙公网安备33011002011664号
    在线客服

    选择服务类型

    技术问题

    • 技术社区
    • 技术支持
    • Q Q 群

    商业授权

    • 使用协议
    • 购买授权
    • 申请试用
    • 授权查询

    图表定制

    • 服务内容
    • VIP 专属服务

    销售服务:    技术服务:

    服务热线:0571 - 8620 8605 / 181 0659 5564    邮件:sales@jianshukeji.com

    服务时间:工作日 9:00 ~ 18:00    紧急服务 :7 x 24 响应(仅限电话)

    重要通知!

    尊敬的用户您好:
    由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:

    网站或服务名称域名替代的网站
    主站www.highcharts.com.cnwww.hcharts.cn
    静态资源服务/CDNcdn.highcharts.com.cn
    code.highcharts.com.cn
    code.hcharts.cn
    img.highcharts.com.cnimg.hcharts.cn
    API 文档api.highcharts.com.cnapi.hcharts.cn
    导出服务export.highcharts.com.cnexport.hcharts.cn

    以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。

    如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。

    如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。

    简数科技 2022-12-22