Highcharts不会从php json加载,但它可以从data.json文件加载

时间:2014-05-08 09:51:07

标签: javascript php json highcharts

我尝试从JSON数据制作高清图。我创建了一个生成json的php文件,并将地址插入到getJSON()中。

$(document).ready(function() {
    $.getJSON("data.php", function(json) {

        chart = new Highcharts.Chart({
            chart: {...

它不会工作,所以我决定将php放在highcharts文件中。就像这样。

<?php
$mysqli = new mysqli("localhost", "root", "", "test");

$resu = array();
$measurement = $_POST["choosenmeasurement"];

for($i = 0; $i < count($_POST["choosenbusid"]); $i++)
{
$busid = $_POST["choosenbusid"][$i];
$clusid = $_POST["choosenclusterid"][$i];

$fieldname = ''.$measurement.'_BUSID_'.$busid.'_CLUSTERID_'.$clusid;

$sql= "SELECT unix_timestamp, $measurement as $fieldname FROM `get` WHERE bus_id = $busid and cluster_id = $clusid";
$sth = $mysqli->query($sql);

$out = array();
$out['name'] = $fieldname;
while ($rr = $sth->fetch_assoc()) {
$out['data'][] = $rr[$fieldname];

}
array_push($resu,$out);

}
$jsonresult = json_encode($resu);



?>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
    var chart;
    $(document).ready(function() {
    $.getJSON(<?php $jsonresult>, function(json) {

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'testchart',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            yAxis: {
                title: {
                    text: ''
                },
                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: json
        });
        });

    });

    });
    </script>
    </head>
    <body>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>

    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    </body>
    </html>

并且它也不会加载,我尝试了很多方法,比如将$ jsonresult放入javascript变量,回显json,打印json,print / echo到getJSON(),但仍然无法工作,如果我将json回显到一个空白区域,它将打印出我想要的json结构。

BUT

如果我将JSON文件放入getJSON(),就像这样

$(document).ready(function() {
    $.getJSON("test.json", function(json)

它会起作用。但是每次我加载图表时,我都不会复制生成json文件的json。

我只是想知道为什么。有什么帮助吗?

1 个答案:

答案 0 :(得分:0)

我也是这样做的,所以在javascript部分你必须要这样:

var json = "<?php echo $pepito; ?>";
datar = JSON.parse(json);

这样你就可以在javascript中获得php的数据了

将时间戳格式的数据和时间传递乘以1000也很重要。例如:

    $timestamp=strtotime($fila[0].$fila[1])*1000;
    //echo "\n".$timestamp;
$hola[0][]=array(   $timestamp, (float)$fila[2]);//RGD
$hola[1][]=array(   $timestamp, (float)$fila[3]);//RGA

您必须在脚本之前包含这些库,不确定它是否重要,但您应该更改它以防万一:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

如果您有任何其他问题,或者您需要更多信息,请与我们联系。