<body>
最近在研究在网页中嵌入hightchart的表格 在嵌入时发现需要在javascript中得到后台的一组数据 代码如下
<code><?phprequire_once('include.php');//得到所有水果$sql = "select * from fruit";function getallfruit($sql){$rows = fetchAll($sql);return $rows;}$rows=getallfruit($sql);$n = getResultNum($sql);?><title>查找</title><script src="jquery-2.1.1.min.js"></script><script src="highcharts.js"></script><body><div><table><tr><td>id</td><td>名称</td><td>价格</td><td>销量</td><td>数量</td></tr><?php foreach ($rows as $row):?><tr><td><?php echo $row["id"]?></td><td><?php echo $row["name"]?></td><td><?php echo $row["price"]?></td><td><?php echo $row["salenum"]?></td><td><?php echo $row["num"]?></td></tr><?php endforeach;?></table><p>一共得到<?php echo $n ?>条数据</p></div><div id="container" style="min-width:800px;height:400px"></div><script type="text/javascript">$(function () { $('#container').highcharts({ //图表展示容器,与div的id保持一致chart: {type: 'column' //指定图表的类型,默认是折线图(line)},title: {text: '水果表' //指定图表标题},xAxis: { categories: ['价格','销量','数量' ]//指定x轴分组},yAxis: {title: {text: 'something' //指定y轴的标题} },series: [{ //指定数据列name: 'Point',//声明在当前函数中的数组对象data: [1,2,3],//数据},{ //指定数据列name: 'Point1',//声明在当前函数中的数组对象data: [1,3,5],//数据},{ //指定数据列name: 'Point2',//声明在当前函数中的数组对象data: [2,4,6],//数据}]});});</script></code>
这只是测试的 我需要在series中得到数据并且显示在网页上
下面是显示的样子
回复内容:
@本文来源gaodai$ma#com搞$代*码6网搞代gaodaima码 <body>
最近在研究在网页中嵌入hightchart的表格 在嵌入时发现需要在javascript中得到后台的一组数据 代码如下
<code><?phprequire_once('include.php');//得到所有水果$sql = "select * from fruit";function getallfruit($sql){$rows = fetchAll($sql);return $rows;}$rows=getallfruit($sql);$n = getResultNum($sql);?><title>查找</title><script src="jquery-2.1.1.min.js"></script><script src="highcharts.js"></script><body><div><table><tr><td>id</td><td>名称</td><td>价格</td><td>销量</td><td>数量</td></tr><?php foreach ($rows as $row):?><tr><td><?php echo $row["id"]?></td><td><?php echo $row["name"]?></td><td><?php echo $row["price"]?></td><td><?php echo $row["salenum"]?></td><td><?php echo $row["num"]?></td></tr><?php endforeach;?></table><p>一共得到<?php echo $n ?>条数据</p></div><div id="container" style="min-width:800px;height:400px"></div><script type="text/javascript">$(function () { $('#container').highcharts({ //图表展示容器,与div的id保持一致chart: {type: 'column' //指定图表的类型,默认是折线图(line)},title: {text: '水果表' //指定图表标题},xAxis: { categories: ['价格','销量','数量' ]//指定x轴分组},yAxis: {title: {text: 'something' //指定y轴的标题} },series: [{ //指定数据列name: 'Point',//声明在当前函数中的数组对象data: [1,2,3],//数据},{ //指定数据列name: 'Point1',//声明在当前函数中的数组对象data: [1,3,5],//数据},{ //指定数据列name: 'Point2',//声明在当前函数中的数组对象data: [2,4,6],//数据}]});});</script></code>
这只是测试的 我需要在series中得到数据并且显示在网页上
下面是显示的样子
方案1:AJAX请求
方案2:如你上边的已经PHP读取了数据那把PHP数据变为JS对象/数组。
要么你的后台模板支持在 JavaScript 中内插表达式,要么就暴露一个 API 接口给 JavaScript 来做请求(AJAX),一般推荐后一种方法。接口按照 JavaScript 的要求把格式化的数据发送出去,发送的数据格式可以是 XML,当然 JSON 更好,很容易转换成 JavaScript 对象。
楼主贴的代码是php代码和html混合的,所以服务端的数据可以像html里的数据一样直接输出在script脚本了
script中的代码类似于这样
<code>var data = "<?php echo $data ?>";</code>
之前php要预处理下数据类似这样
<code><?php$arr = array(22,44,5655);// 数据数组$data = json_encode($arr);?></code>
一个异步接口去拉数据就可以了。
<code>$.get('/path/to/file', function(data) { if(data){ //将数据塞到你的相应的dom节点中就OK了 } /});</code>