服务端动态渲染图表
最后修改时间：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
赏
订阅更新