Fatal编程技术网
  • php/
  • 未使用High Charts和PHP绘制图形

未使用High Charts和PHP绘制图形

php mysql json highcharts

未使用High Charts和PHP绘制图形,php,mysql,json,highcharts,Php,Mysql,Json,Highcharts,我从MySQL数据库获取温度，现在我想绘制过去3天的温度曲线图。但是这张图没有画出来。 下面是两个文件的代码。 //Sql.php <?php // if you want to send request from a html file stored // locally uncomment the line below header('Access-Control-Allow-Origin: *'); // in the commands "mysql_..." change t

我从MySQL数据库获取温度，现在我想绘制过去3天的温度曲线图。但是这张图没有画出来。 下面是两个文件的代码。 //Sql.php

<?php
// if you want to send request from a html file stored
// locally uncomment the line below
header('Access-Control-Allow-Origin: *'); 


// in the commands "mysql_..." change the following:
// xxxx - your SQL server address (np: www.abc.com)
// yyyy - user name
// zzzz - password
// qqqq - database name
// watch out for the capital letters!
mysql_connect("192.168.100.107:3306", "root", "hannan786") or die(mysql_error());
mysql_select_db("pi") or die(mysql_error());

// describe the date ragne - here: the last 3 days
$phpdate=time()- (3*24 * 60 * 60);
$datefrom = date( 'Y-m-d H:i:s', $phpdate );
$dateto = date( 'Y-m-d H:i:s', time() );

$data = mysql_query("SELECT * FROM temp WHERE `time` > '$datefrom'
    AND `time` < '$dateto' ORDER BY time ASC") or die(mysql_error());
$rowcount = mysql_num_rows($data);
$counter=1;

// prepare the answer needed by Highcharts:
echo '{
    "title": {"text": "temperature"},
    "chart": {"renderTo": "container"},
    "series": [{"name": "temperature", "data":[';

// fill the data from the database,
// here - the data of interest is stored in column "Temp4":
while($r = mysql_fetch_assoc($data)) {
    echo '['.strtotime($r["time"])*1000 . ', '.$r["temperature"]/10 .']';
    if($counter < $rowcount){
        echo ", ";
    }
    $counter=$counter+1;
}

// finalize the answer
echo'  ]}]}';

mysql_free_result($data);
?>


汉南
var期权；
$（文档）.ready（函数（）{
Highcharts.setOptions({
全球：{
useUTC:false
}
});             
选项={
xAxis：{
键入：“日期时间”，
日期时间标签格式：{
日期：'%e，共%b'，
小时数：'%H:%M
%d%b'
}  
},
yAxis:[{
标题：{
文本：空
},
标签：{
对齐：“左”，
x:3，
y:16，
格式化程序：函数（）{
返回Highcharts.numberFormat（this.value，0）；
}
},
showFirstLabel:错误
}, { 
链接到：0，
网格线宽：0，
相反：是的，
标题：{
文本：空
},
标签：{
对齐：“右”，
x:-3，
y:16，
格式化程序：函数（）{
返回Highcharts.numberFormat（this.value，0）；
}
},
showFirstLabel:错误
}],
图例：{
对齐：“左”，
垂直排列：“顶部”，
y:0，
浮动：是的，
边框宽度：0
},
工具提示：{
格式化程序：函数（）{
返回Highcharts.dateFormat（“%a，%d.%b%H:%M'，this.x）+'
'+this.series.name++'+this.y++''C'；
}
},
打印选项：{
系列：{
光标：“指针”，
标记：{
启用：false，
线宽：1
}
}
}
};
$.getJSON（“sql.php”，函数（json）{
var options1=$.extend（json，选项）；
图表=新的高点图表。图表（选项1）；
});
});
图表正在使用HighChart库。请帮助我，如果你有任何想法，为什么图形或图表不能正常工作。
多谢各位

原因是创建了一个类似于json的字符串，但应该是原生json。为此，请通过array（）创建结构并调用json_encode（）方法，将PHP元素转换为json。@SebastianBochan嘿，请给出代码？？请查看json_encode（）函数手册 
<!DOCTYPE HTML>
<html>
<head>
<html xmlns="http://www.w3c.org/1999/xhtml"; xml:lang="pl" lang="pl">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hannan</title>

<!-- pliki js znajdziesz na www.jquery.com i www.highcharts.com-->

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/themes/grid.js"></script>
<script src="https://code.highcharts.com"></script>


<script type="text/javascript">
   var options;         

            $(document).ready(function() {
                Highcharts.setOptions({
                    global: {
                        useUTC: false
                    }
                });             
                options = {

                    xAxis: {
                        type: 'datetime',
                        dateTimeLabelFormats: {
                            day: '%e of %b',
                            hour: '%H:%M<br>%d %b'
                        }  
                    },
                    yAxis: [{ 
                        title: {
                            text: null
                        },
                        labels: {
                            align: 'left',
                            x: 3,
                            y: 16,
                            formatter: function() {
                                return Highcharts.numberFormat(this.value, 0);
                            }
                        },
                        showFirstLabel: false
                    }, { 
                        linkedTo: 0,
                        gridLineWidth: 0,
                        opposite: true,
                        title: {
                            text: null
                        },
                        labels: {
                            align: 'right',
                            x: -3,
                            y: 16,
                            formatter: function() {
                                return Highcharts.numberFormat(this.value, 0);
                            }
                        },
                        showFirstLabel: false
                    }],

                    legend: {
                        align: 'left',
                        verticalAlign: 'top',
                        y: 0,
                        floating: true,
                        borderWidth: 0
                    },

                    tooltip: {
                        formatter: function() {
                                return Highcharts.dateFormat('%a, %d.%b %H:%M', this.x)+'<br><b>'+ this.series.name +' '+ this.y +'°C</b>';
                        }
                    },
                    plotOptions: {
                        series: {
                            cursor: 'pointer',
                            marker: {
                                enabled: false,
                                lineWidth: 1
                            }
                        }
                    }
                };

                $.getJSON("sql.php", function(json) {
                    var options1 = $.extend(json, options);
                    chart = new Highcharts.Chart(options1);
                });
            });

</script>
</head>

<body>
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>