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

服务端动态渲染图表

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

服务端动态渲染网页是生成网页的最常用方法, 该方法同样适用于动态生成包含 Highcharts 图表的网页。

服务端动态渲染网页的做法:后端程序读取数据库数据并按照一定的业务逻辑处理成字符串,在页面对应位置上输出。

下面我们用 PHP 举例简单说明这个过程:

实例1: 只包含数值的

<?php
  // php 读取数据库并生成 字符串,这里这是简单的实例
  // 读取数据
  while ($row = mysql_fetch_array($result)) {
     $data[] = $row['value'];
  }

  // php 数组拼接成字符串,最终的结果是 "2, 4, 5, 8" 这种形式
  $dataString = join($data, ',');     

?>
<html>
  <body>
    <div id="container"></div>
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script>
      var chart = Highcharts.chart('container', {
        series: [{
          data: [<?php echo $dataString ?>], // 在对应的位置输出
          pointStart: 0,
          pointInterval: 2
        }]
      }); 
    </script>
  </body>
</html>

实例2: 包含 x 和 y 的形式

<?php
  while ($row = mysql_fetch_array($result)) {
     // 处理 $row;
     $datetime *= 1000; // 将 Unix 时间戳转换成 JavaScript 时间戳
     $data[] = "[$datetime, $value]"; // 生成 data 数组
  }

  // 转换成字符串,最终的数据格式是: [ [时间戳,值], [时间戳,值], [时间戳,值]]
  $dataString = join($data, ',');
?>
<html>

<body>
  <div id="container"></div>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  <script>
  var chart = Highcharts.chart('container', {
    series: [{
      data: [<?php echo $dataString ?>]
    }]
  });
  </script>
</body>

</html>

提示:在 PHP 中也可以用 json_encode 来将对象转换成字符串。

动态渲染的优缺点

用动态渲染的方法生成 Highcharts 的优点是可以灵活的生成复杂的图表配置,缺点是无法灵活的进行数据交互。

版权声明

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

标题:服务端动态渲染图表 | Highcharts 使用教程

链接:https://www.highcharts.com.cn/docs/dynamic-produce-html-page/

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

    订阅更新

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

    选择服务类型

    技术问题

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

    商业授权

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

    图表定制

    • 服务内容
    • VIP 专属服务

    销售服务:    技术服务:

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

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