服务端动态渲染图表

优质

小牛编辑

141浏览

2023-12-01

服务端动态渲染网页是生成网页的最常用方法，该方法同样适用于动态生成包含 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></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></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 的优点是可以灵活的生成复杂的图表配置，缺点是无法灵活的进行数据交互。