PHP+;mysql+;海图
我想在highchart中显示mysql数据库。我找到了一个从文档中获取数据的示例,但我想使用函数。当我使用函数时,程序不工作。函数的输出与更改前的文档相同。也许函数或我使用它的方式中有一些错误 这是我的代码:PHP+;mysql+;海图,php,mysql,highcharts,Php,Mysql,Highcharts,我想在highchart中显示mysql数据库。我找到了一个从文档中获取数据的示例,但我想使用函数。当我使用函数时,程序不工作。函数的输出与更改前的文档相同。也许函数或我使用它的方式中有一些错误 这是我的代码: <? $data = new MysqlDatabase($db) ?> <script type="text/javascript"> var chart; $(document).ready(function() { var
<? $data = new MysqlDatabase($db) ?>
<script type="text/javascript">
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Date',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type: 'datetime',
tickInterval: 3600 * 1000, // one hour
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function() {
return Highcharts.dateFormat('%l%p', this.value);
}
}
},
yAxis: {
title: {
text: 'Humidity'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%l%p', this.x-(1000*3600)) +'-'+ Highcharts.dateFormat('%l%p', this.x) +': <b>'+ this.y + '</b>';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Count'
}]
}
jQuery.get(<?php $data->find_all_for_charts($db);?>, null, function(tsv) {
var lines = [];
traffic = [];
try {
// split the data return into lines and parse them
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function(i, line) {
line = line.split(/\t/);
date = Date.parse(line[0] +' UTC');
traffic.push([
date,
parseInt(line[1].replace(',', ''), 10)
]);
});
} catch (e) { }
options.series[0].data = traffic;
chart = new Highcharts.Chart(options);
});
});
</script>
var图;
$(文档).ready(函数(){
变量选项={
图表:{
renderTo:'容器',
defaultSeriesType:“行”,
marginRight:130,
marginBottom:25
},
标题:{
文本:“日期”,
x:-20/中心
},
副标题:{
文本:“”,
x:-20
},
xAxis:{
键入:“日期时间”,
滴答声间隔:3600*1000,//一小时
宽度:0,
网格线宽度:1,
标签:{
对齐:'居中',
x:-3,
y:20,
格式化程序:函数(){
返回Highcharts.dateFormat(“%l%p”,此.value);
}
}
},
亚克斯:{
标题:{
文字:“湿度”
},
绘图线:[{
值:0,
宽度:1,
颜色:'#808080'
}]
},
工具提示:{
格式化程序:函数(){
返回Highcharts.dateFormat('%1%p',this.x-(1000*3600))+'-'+Highcharts.dateFormat('%1%p',this.x)+':'+this.y++';
}
},
图例:{
布局:“垂直”,
对齐:“右”,
垂直排列:“顶部”,
x:-10,
y:100,
边框宽度:0
},
系列:[{
姓名:“计数”
}]
}
get(,null,函数(tsv){
var行=[];
流量=[];
试一试{
//将返回的数据拆分为行并对其进行分析
tsv=tsv.分割(/\n/g);
jQuery.each(tsv,函数(i,行){
line=line.split(/\t/);
date=date.parse(第[0]+'UTC'行);
交通,推([
日期,
parseInt(第[1]行)。替换(',',''),10)
]);
});
}捕获(e){}
options.series[0]。数据=流量;
图表=新的高点图表。图表(选项);
});
});
功能代码:
<?php
class MysqlDatabase
{
public function find_all_for_charts($db)
{
$stmt = $db->query('SELECT * FROM temperature');
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo $row['timestamp'] . "\t" . $row['humidity'] . "\n";
}
}
}
?>
在本例中,函数使用了文档的名称:
jQuery.get(<?php $data->find_all_for_charts($db);?>, null, function(tsv) {
jQuery.get(,null,函数(tsv){
我怎样才能解决您的问题?提前谢谢。:)查看jQuery.get()的文档: 此函数的第一个参数是GET请求的URL 代码中的数据来自方法:
MysqlDatabase->find_all_for_charts()
在HighCharts软件包中,您可以找到如何使用它的示例。只需从下载它,并查找“Ajax加载数据,可点击点”演示