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

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

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

实例1： 只包含数值的

  1. <?php
  2.   // php 读取数据库并生成 字符串，这里这是简单的实例
  3.   // 读取数据
  4.   while ($row = mysql_fetch_array($result)) {
  5.      $data[] = $row['value'];
  6.   }
  8.   // php 数组拼接成字符串，最终的结果是 "2, 4, 5, 8" 这种形式
  9.   $dataString = join($data, ',');     
  11. ?>
  12. <html>
  13.   <body>
  14.     <div id="container"></div>
  15.     <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  16.     <script>
  17.       var chart = new Highcharts.Chart({
  18.         chart: {
  19.           renderTo: 'container'
  20.         },
  21.         series: [{
  22.           data: [<?php echo $dataString ?>], // 在对应的位置输出
  23.           pointStart: 0,
  24.           pointInterval: 2
  25.         }]
  26.       }); 
  27.     </script>
  28.   </body>
  29. </html>

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

  1. <?php
  2.   while ($row = mysql_fetch_array($result)) {
  3.      // 处理 $row;
  4.      $datetime *= 1000; // 将 Unix 时间戳转换成 JavaScript 时间戳
  5.      $data[] = "[$datetime, $value]"; // 生成 data 数组
  6.   }
  8.   // 转换成字符串，最终的数据格式是： [ [时间戳，值], [时间戳，值], [时间戳，值]]
  9.   $dataString = join($data, ',');
  10. ?>
  11. <html>
  13. <body>
  14.   <div id="container"></div>
  15.   <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  16.   <script>
  17.   var chart = new Highcharts.Chart({
  18.     chart: {
  19.       renderTo: 'container'
  20.     },
  21.     series: [{
  22.       data: [<?php echo $dataString ?>]
  23.     }]
  24.   });
  25.   </script>
  26. </body>
  28. </html>

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

动态渲染的优缺点

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

原文: https://www.hcharts.cn/docs/dynamic-produce-html-page