Highcharts通过json显示sql中的值 - Highcharts Display values from sql via json

你好，我尝试使用json从sql数据库的数据Highcharts。

所有的都在做，但是我看不到任何值

我用这个脚本得到数据:

<?php
header('content-type: text/html; charset=utf-8');
include("db.inc.php");
$con = mysql_connect(DB_SERVER, DB_USER, DB_PASSWOR
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db(DB_NAME, $con);
$sth0 = mysql_query("SELECT `DATETIME` FROM `dg_wall24` WHERE DATETIME >
NOW()INTERVAL 1 HOUR");
$rows0 = array();
$rows0['name'] = 'DATETIME';
while($r0 = mysql_fetch_array($sth0)) {
$rows0['data'][] = $r0['DATETIME'];
}
 $sth1 = mysql_query("SELECT `dg_t01` FROM `dg_wall24` WHERE DATETIME >
 NOW()INTERVAL 1 HOUR");
 $rows1 = array();
 $rows1['name'] = 'dg_t01';
 while($r1 = mysql_fetch_array($sth1)) {
 $rows1['data'][] = $r1['dg_t01'];
 }
 $sth2 = mysql_query("SELECT `dg_h01` FROM `dg_wall24` WHERE DATETIME >
 NOW()    INTERVAL 1 HOUR");
 $rows2 = array();
 $rows2['name'] = 'dg_h01';
 while($r2 = mysql_fetch_array($sth2)) {
 $rows2['data'][] = $r2['dg_h01'];
}
 $result = array();
 array_push($result,$rows0);
 array_push($result,$rows1);
 array_push($result,$rows2);
 print json_encode($result);
 mysql_close($con);
 ?>

结果:

[{"name":"DATETIME","data":["2013-04-27 08:17:52","2013-04-27 08:22:52","2013-04-27 08:27:53","2013-04-27 08:32:54","2013-04-27 08:37:55","2013-04-27 08:42:55","2013-04-27 08:47:56","2013-04-27 08:52:57","2013-04-27 08:57:58","2013-04-27 09:02:58","2013-04-27 09:07:59","2013-04-27 09:13:00"]},{"name":"dg_t01","data":["22.40","22.40","22.40","22.40","22.30","22.30","22.40","22.40","22.40","22.40","22.40","22.40"]},{"name":"dg_h01","data":["40.20","40.40","40.50","40.80","40.70","40.70","40.80","40.90","41.00","41.00","40.90","40.70"]}]

在Highchart中，我可以看到x轴上的时间轴和值的名称，但没有线和值。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 40
                },
                title: {
                    text: 'Dachgeschoss',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    //categories: []
                },
                yAxis: {
                    title: {
                        text: 'Temperatur & Luftfeuchtigkeit'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: []
            }
            $.getJSON("data2.php", function(json) {
                options.xAxis.categories = json[0]['data'];
                options.series[0] = json[1];
                options.series[1] = json[2];
                chart = new Highcharts.Chart(options);
            });
        });
        </script>
    </head>
    <body>
        <script src="js/highcharts.js"></script>
        <script src="js/modules/exporting.js"></script>
        <script type="text/javascript" src="js/themes/gray.js"></script>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

这是可能的，我有一个问题与数据格式(float, int…)或与值中的点?

非常感谢您的帮助

问题确实是你的JSON对象包含字符串值而不是浮点值为您的数据:

{ ... "data":["40.20","40.40","40.50", ... ]}

我不知道你的数据库中的字段类型是什么，我不是PHP编码器，但你可以尝试在json_encode上设置JSON_NUMERIC_CHECK选项。

如果这对你不起作用，你也可以在Javascript中使用parseFloat转换字符串:

for (var i = 0, num; num = json[1].data[i]; i++)
{
  json[1].data[i] = parseFloat(num);
}