最后修改时间: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 的优点是可以灵活的生成复杂的图表配置,缺点是无法灵活的进行数据交互。
订阅更新
尊敬的用户您好:
由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:
网站或服务名称 | 域名 | 替代的网站 |
---|---|---|
主站 | www.highcharts.com.cn | www.hcharts.cn |
静态资源服务/CDN | cdn.highcharts.com.cn code.highcharts.com.cn | code.hcharts.cn |
img.highcharts.com.cn | img.hcharts.cn | |
API 文档 | api.highcharts.com.cn | api.hcharts.cn |
导出服务 | export.highcharts.com.cn | export.hcharts.cn |
以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。
如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。
如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。
简数科技 2022-12-22