0

我正在从数据库中提取一些数据，我试图将这些数据呈现到 Highcharts 股票图表中。使用 PHP 从数据库中提取数据并通过$.get(..php/line-data.php)调用传递给图表，检索到的数据应该是在图表上呈现的数据。

数据以下列方式返回，我已通过登录data控制台验证了这一点。它看起来是这样的，第一个值是 UNIX 到 Javascript 转换的日期/时间（x 轴），第二个值是值（y 轴）：

[[1362639600000, 8],[1362726000000, 20],[1362985200000, 28],[1363071600000, 51],[1363158000000, 64],[1363244400000, 11],[1363330800000, 4],[1363503600000, 4],[1363590000000, 21],[1363676400000, 10],[1363762800000, 31],[1363849200000, 13],[1363935600000, 17],[1364194800000, 10],[1364454000000, 1],[1365058800000, 30],[1365145200000, 10],[1366009200000, 55],[1366182000000, 18],[1366268400000, 22],[1366354800000, 12]]

作为一个实验，我尝试将这些数据直接插入一个基本的演示 Fiddle，它似乎渲染得很好。

小提琴在这里。

那么我做错了什么？一切似乎都设置正确，但它没有渲染。这就是我所看到的：

在此处输入图像描述

这是我的代码的相关部分。是的，我知道 mysql_* 已被弃用...我会更改它。

$.get('../php/line-data.php', function(data) {
    window.chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'total_mentions',
            margin: [20, 10, 10, 10],
            spacingTop: 0,
            spacingBottom: 1,
            spacingLeft: 0,
            spacingRight: 0
        },

        series : [{
            name : 'Total Mentions',
            data: data,
            type:'line',
            lineWidth:1,
            shadow:false,
            states: {
                hover: {
                    lineWidth:1
                }
            },
            id : 'dataseries',
            tooltip : {
                valueDecimals: 4,
                borderColor:'#DA7925',
                borderRadius: 0,
                borderWidth: 1,
                shadow: false
            },
            color:'#DA7925',
            fillOpacity:0.2
        }]
[more options...etc.]

这段代码没有问题。它正在提取正确的数据并与我的期望相呼应。

<?php

    $expAddress = "URL";
    $expUser = "USERNAME";
    $expPwd = "PASSWORD";
    $database = "DB";
    $db = mysql_connect($expAddress, $expUser, $expPwd);
    mysql_select_db($database, $db);

    $ok = mysql_query("
                        SELECT 
                            DATE(created_at) AS create_date,
                            COUNT(id) AS total
                        FROM
                            tweets
                        WHERE 
                            subject LIKE 'word1'
                        OR  
                            subject LIKE 'word2'
                        GROUP BY 
                            DATE(created_at)");

    if (!$ok) {
        echo "<li>Mysql Error: ".mysql_error()."</li>";
    }
    else {
        while($row = mysql_fetch_assoc($ok)){           
            extract($row);
            $date = strtotime($create_date);
            $date *= 1000;
            $data[] = "[$date, $total]";
        }
        $tmp = join($data,',');
        echo "[".$tmp."]";
    }

?>
4

2 回答 2

2

您是否尝试过data (string)在将其设置为 javascript 对象之前将其解析为 javascript 对象series[i].data？

series : [{          
            data: JSON.parse(data)
        }]

您从 php 获得$.get的基本上是string，而不是数字数组的 javascript 数组，这就是您想要的。它可能看起来像那样，但它很简单"5"!=5，但parseInt("5")==5json 对象也是如此，您需要将字符串解析为这样的对象，然后 javascript 或 highcharts 才能正确解释它，highcharts 可以代表您完成，但是它不是那样设计的。

试试他的小提琴来了解图片中的数据类型

var data="[[1362639600000, 8],[1362726000000, 20],[1362985200000, 28],[1363071600000, 51],[1363158000000, 64],[1363244400000, 11],[1363330800000, 4],[1363503600000, 4],[1363590000000, 21],[1363676400000, 10],[1363762800000, 31],[1363849200000, 13],[1363935600000, 17],[1364194800000, 10],[1364454000000, 1],[1365058800000, 30],[1365145200000, 10],[1366009200000, 55],[1366182000000, 18],[1366268400000, 22],[1366354800000, 12]]"
console.log(typeof data);    //string
var parsedData=JSON.parse(data);
console.log(typeof parsedData);    //object
console.log(typeof parsedData[0]);    //object [1362639600000, 8]
console.log(typeof parsedData[0][0]);    //number 1362639600000

当您将控制台值直接粘贴到小提琴中时，实际上是将其粘贴为有效的 javascript 数组，请尝试使用用"引号括起来的控制台值"，看看是否重现了确切的问题！

演示@jsFiddle

另一种方法可能是使用该$.getJSON()方法。jQuery 在调用您的回调方法之前为您进行解析

于 2013-04-22T19:08:41.127 回答
-1

您的问题出在 PHP 脚本的输出中或当您在 Javascript 中接收数据时（非常明显）。

首先，不要使用 json_encode ( http://php.net/manual/en/function.json-encode.php ) 手动执行 JSON。它更容易，它将保证字符串将被正确转义。

其次，data使用调试器检查您的变量。您还可以将变量的确切内容发布到问题中。

但基本上，只要它在小提琴中而不是在您的程序中工作，您还没有在小提琴中正确地重现代码中的错误。

例如，您可以将data回调中的数据替换为小提琴中的数据，以查看代码是否运行。

于 2013-04-20T07:59:43.107 回答