Highstock不画画

时间:2016-04-18 06:00:21

标签: javascript php highcharts

http://www.highcharts.com/stock/demo/basic-line

这是我的json.php代码

<?php
header("content-type: application/json");
define('HOST', 'localhost');
     define('USER', 'root');
     define('PASSWORD', 'password');
     define('NAME_BD', 'bd');
$connect = mysql_connect(HOST, USER, PASSWORD)
        or die("die"
               .mysql_error( ));
mysql_select_db(NAME_BD, $connect)
         or die ("wtf"
                 .mysql_error( ));
$result = mysql_query("SELECT UNIX_TIMESTAMP(`Time`) * 1000 as datetime, `Current A` as A FROM `Table`")
     or die ("die".mysql_error( ));
while ($row = mysql_fetch_array($result)) {
$data[] = $row['datetime'];
$datab[] = $row['A'];
}
echo '?(' . "\n" . '['. "\n";
$count = count($data);
for ($i=0; $i<$count; $i++)
{
echo '['. str_replace('"', "", json_encode($data[$i], JSON_HEX_APOS)) . ',' . str_replace('"', "", json_encode($datab[$i], JSON_HEX_APOS)) .']' . ',' . "\n";
}
echo ']);';
?>

我刷新我的页面而highstock不画画。请帮帮我。

这是我的stock.html

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

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

    $.getJSON('http://192.168.1.175/json.php', function (data) {
        // Create the chart
        $('#container').highcharts('StockChart', {


            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
                data : data
            }]
        });
    });

});

                </script>
        </head>
        <body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>
        </body>
</html>

Stock.html调用json.php,但刷新stock.html时我看不到绘图。 请帮帮我

1 个答案:

答案 0 :(得分:0)

请尝试以下代码

在Ajax代码中

function drawGrap()
{
    $.ajax({
        type: "POST",
        url: 'graph.php',
        data: '',
        success: function(json) {
            drawSalesChart(json);
        }
    });
}

在graph.php中

<?php
if(!empty($data))
{
    foreach ($data as $d) 
    {
        $time = strtotime($d['date']);
        $date = date("Y-m-d",$time);

        $graphData[$date][0] = 'Date.UTC('. date("Y",$time) .','. (date("m",$time)-1) .','. date("d",$time) .')';
        $graphData[$date][1] = $d['count'];
    }
}       
sort($graphData);

//Convert result array to json format
$jsonGraphData = json_encode($graphData);
$jsonGraphData = str_replace('"', '', $jsonGraphData);

echo $jsonGraphData;
?>

回复后

function drawSalesChart( data)
{
    $('#GraphID').css("height", "400px");
    $('#GraphID').highcharts('StockChart', {
        title: {
            text: 'Daily Sales'
        },
        colors: ['#920000'],
        navigator: {
            enabled: false
        },
        rangeSelector: {
            selected: 5,
            buttons: [
                {
                    type: 'week',
                    count: 1,
                    text: '1 Week'
                },
                {
                    type: 'month',
                    count: 1,
                    text: '1 Month'
                },
                {
                    type: 'month',
                    count: 3,
                    text: '3 Months'
                },
                {
                    type: 'month',
                    count: 6,
                    text: '6 Months'
                },
                {
                    type: 'year',
                    count: 1,
                    text: '1 Year'
                },
                {
                    type: 'all',
                    text: 'All'
                }
            ],
            buttonTheme: {
                width: 100,
                padding: 5,
                style: {
                    color: '#000000'
                }
            }
        },
        series: [{
                name: 'Kr',
                type: 'area',
                data: eval(data),
                tooltip: {
                    valueDecimals: 2
                },
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, '#FF4848'],
                        [1, '#ffe1e1'],
                    ]
                }
            }]
    });
}