Question

我正在从我正在尝试渲染的数据库中提取一些数据到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 HERE.

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

enter image description here

以下是我的代码的相关部分。 是的，我知道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."]";
    }

?>

Answer 1

您是否尝试将data (string)解析为javascript对象，然后再将其设置为series[i].data？

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

你从php到$.get获得的内容基本上是string而不是数组数组的javascript数组，这正是你想要的。它可能看起来像这样，但它就像"5"!=5一样简单，但是parseInt("5")==5与json对象的情况相同，你需要在javascript或highcharts正确解释之前将字符串解析为这样的对象，highcharts可以代表你做，但它不是那样设计的。

Try his fiddle了解图片中的数据类型

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数组，尝试使用"引号"包含的控制台值，并查看确切的问题是再现!!

<强> Demo @ jsFiddle

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

Answer 2

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

首先，不要手工使用JSON_encode（http://php.net/manual/en/function.json-encode.php）。它更容易，它将保证字符串将被正确转义。

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

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

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

Highcharts不呈现数据点

2 个答案: