0

我的 highstock 不会在 localhost 的图表中打开数据。有人知道为什么吗？

图表不显示日期。我已经尝试了 localhost、ipaddress，但仍然没有运气。

//jsonp.php file
<?php
$host="localhost";
$username="root"; 
$password=""; 
$db_name="northwind"; 
$con=mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
mysql_select_db("$db_name")or die("cannot select DB");
$sql = "select unix_timestamp(OrderDate) as datetime, Freight from TEST1 ORDER BY OrderDate ASC LIMIT 100";
$result = mysql_query($sql);
$data = array();
while ($row = mysql_fetch_array($result)) {
extract ($row);
$datetime *= 10000; // convert from Unix timestamp to JavaScript time
$data[] = array((float)$datetime,(float) $Freight);

}
$array2[] = json_encode($data);
///data2[] = json_decode($array2);
echo json_encode($data);
?>




////output from jsonp.php file
[[8364528000000,32.38],[8365392000000,11.61],[8367984000000,65.83],[8368848000000,51.3],[8369712000000,58.17],[8370576000000,22.98],[8371440000000,148.33],[8374032000000,13.97],[8374896000000,81.91],[8375760000000,140.51],[8376624000000,3.25],[8377488000000,3.05],[8380080000000,48.29],[8380944000000,146.06],[8381808000000,3.67],[8382672000000,55.28],[8383536000000,25.73],[8386128000000,208.58],[8386992000000,66.29],[8387856000000,4.56],[8388720000000,136.54],[8389584000000,98.03],[8392176000000,76.07],[8393040000000,6.01],[8393904000000,26.93],[8394768000000,13.84],[8395632000000,125.77],[8398224000000,92.69],[8399088000000,25.83],[8399952000000,8.98],[8399952000000,2.94],[8400816000000,12.69],[8401680000000,84.81],[8404272000000,76.56]]


////html file
html file-----below
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>

</style>



<script type='text/javascript'>//<![CDATA[ 

$(function() {

$.getJSON('127.0.0.1/HIGH_STOCK/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},

rangeSelector : {
selected : 1
},

title : {
text : 'TEST DATA'
},

series : [{
name : 'TEST',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});

});

//]]> 

</script>


</head>
<body>
<script src="JS/highstock.js"></script>
<script src="JS/modules/exporting.js"></script>

<div id="container" style="height: 500px; min-width: 500px"></div>

</body>


</html>
4

2 回答 2

0

您的代码似乎一切正常。
演示

在您的$.getJSON(...)情况下，您需要注意同源政策

你没有具体说明你遇到了什么错误或你面临什么问题，在这种情况下真的很难提供帮助。请考虑发布错误的 jsFiddle 复现

于 2012-12-25T06:57:01.593 回答
0

好的，在 localhost 上使用 PHPmyadmin 上的 Northwind 数据库和 WAMP，它正在工作。原谅我的粗心，已经晚了。如果您有问题，请告诉我。

//PHP
<?php

//read the northwind database nworders
$host="localhost";
$username="root"; 
$password="root"; 
$db_name="NORTHWIND"; 
$con=mysql_connect("$host", "$username", "")or die("cannot connect"); 
mysql_select_db("$db_name")or die("cannot select DB");
$sql = "select distinct unix_timestamp(ShippedDate) as datetime, Freight from nworders  WHERE shipname LIKE '%Bon app%' ORDER BY datetime ASC LIMIT 50000 ";

$result = mysql_query($sql);
if($result === FALSE) {
    die(mysql_error()); // TODO: better error handling
    echo mysql_error();
}

$data = array();
while ($row = mysql_fetch_array($result)) {
extract ($row);
$datetime *= 1000;// convert from Unix timestamp to JavaScript time
$data[] = array($datetime, (FLOAT)$Freight);

}
$array2[] = json_encode($data);
echo json_encode($data);
?>


///

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highstock Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
$(function() {

    $.getJSON('HTTP://localhost/HIGH/PHP_READ_TEST.PHP', function(data) {



        // Create a timer
        var start = + new Date();

        // Create the chart
        $('#container').highcharts('StockChart', {
            chart: {
                events: {
                    load: function(chart) {
                        this.setTitle(null, {
                            text: 'Built chart at '+ (new Date() - start) +'ms'
                        });
                    }
                },
                zoomType: 'x'
            },

            rangeSelector: {
                buttons: [{
                    type: 'day',
                    count: 3,
                    text: '3d'
                }, {
                    type: 'week',
                    count: 1,
                    text: '1w'
                }, {
                    type: 'month',
                    count: 1,
                    text: '1m'
                }, {
                    type: 'month',
                    count: 6,
                    text: '6m'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1y'
                }, {
                    type: 'all',
                    text: 'All'
                }],
                selected: 3
            },

            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                }
            },

            title: {
                text: 'Hourly temperatures in Vik i Sogn, Norway, 2004-2010'
            },

            subtitle: {
                text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
            },

            series: [{
                name: 'Temperature',
                data: data,
                pointStart: Date.UTC(2004, 3, 1),
                pointInterval: 3600 * 1000,
                tooltip: {
                    valueDecimals: 1,
                    valueSuffix: '°C'
                }
            }]

        });
    });
});
        </script>
    </head>
    <body>
<script src="highstock.js"></script>
<script src="exporting.js"></script>

<div id="container" style="height: 500px; min-width: 500px"></div>
    </body>
</html>
于 2013-12-31T16:01:23.623 回答