0

我正在尝试使用 javascript Highcharts 显示 JSON 数据的排名图表。我似乎无法显示图表。

这是javascript代码：

$(document).ready(function() {
var options = {
    chart: {
            renderTo: 'drawing',
            zoomType: 'x',
            width: 900,
            height: 222
    },
    exporting: {
        enabled:true      
    },
    title: {
        text: url+' - '+keyword
    },
    credits: {
        text: '****',
        href: 'http://***/'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            day: '%b %e '   
        }
    },
    yAxis: [{
        //min: 1,
        allowDecimals: false,
        reversed: true,
        ///: .2,
        //maxPadding: .2,

        title: {
            text: 'Rankings'
        }
    },],

    tooltip: {
        crosshairs: true,
        shared: true
    },
    series: [{}]
};  

var url =  "http://*******/chart.php";
    $.getJSON(url,  function(data) {

        $.each(data, function(arrayID,group) {
            $.each(group.data, function(id,val) {
            arg = val[0].replace(/Date.UTC\((.*?)\)/, '$1').split(',');
            var timestamp = Date.UTC.apply( null , arg );
            date=new Date(timestamp);
            data[arrayID].data[id][0] = timestamp;
            });
        });

        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });                          
});

我们的 PHP 脚本给了我们这个 JSON：

[{"name":"Google Rank","data":[["Date.UTC(2013,04,05)","23"],["Date.UTC(2013,04,04)","23"],["Date.UTC(2013,04,03)","22"],["Date.UTC(2013,04,02)","24"],["Date.UTC(2013,04,01)","26"],["Date.UTC(2013,03,31)","24"],["Date.UTC(2013,03,30)","24"],["Date.UTC(2013,03,29)","25"],["Date.UTC(2013,03,28)","25"],["Date.UTC(2013,03,27)","25"],["Date.UTC(2013,03,26)","26"],["Date.UTC(2013,03,25)","25"],["Date.UTC(2013,03,24)","24"],["Date.UTC(2013,03,23)","-"],["Date.UTC(2013,03,22)","10"],["Date.UTC(2013,03,21)","10"],["Date.UTC(2013,03,20)","10"],["Date.UTC(2013,03,19)","10"],["Date.UTC(2013,03,18)","10"],["Date.UTC(2013,03,17)","10"],["Date.UTC(2013,03,16)","9"],["Date.UTC(2013,03,15)","9"],["Date.UTC(2013,03,14)","9"],["Date.UTC(2013,03,13)","9"],["Date.UTC(2013,03,12)","9"]],"visible":"true","pointInterval":"86400000","showInLegend":"false"},{"name":"Bing Rank","data":["Date.UTC(2013,2,9)",9],"visible":"true","pointInterval":"86400000","showInLegend":"false"}]

请注意，JSON 数据将数字表示为字符串，这可能是一个问题。

生成 JSON 数据的 PHP 代码：

$googledata = array();
while($gkdata = mysql_fetch_assoc($keywordquery)){
    $explodedate = explode("-", $gkdata['date']);
    $year = $explodedate[0];
    $month = $explodedate[1];
    $day = $explodedate[2];    
    $googledata[] = array(
        "".$year.",".$month.",".$day."",  
        $gkdata['grank']     //$gkdata['grank'] should be a number, but is sometimes a dash so it's cast to an accommodating datatype: string.
    );
}

$chartdata = array(
    array(
        "name" => 'Google Rank',
        "data" => $googledata,
        "visible" => 'true',
        "pointInterval" => '86400000',
        "showInLegend" => 'false',
    ),
    array(
        "name" => 'Bing Rank',
        "data" => array(
            'Date.UTC(2013,2,9)', 
            9
        ),
        "visible" => 'true',
        "pointInterval" => '86400000',
        "showInLegend" => 'false',
    )
);

除了没有数据的图表本身，Highcharts 不会显示任何其他内容。应该在Date.UTC(2013,03,12)X 轴上，它旁边的数字应该是等级数。任何人都可以看到有什么问题吗？

4

2 回答 2

1

该图表将数据作为 [x,y]。如果您希望日期位于 y 轴上，只需将数据的顺序反转为 ['value',dateamp']。

编辑：

我从文本中不确定您遇到的问题是什么，但是您的代码会出现的一个问题是您的数字数据值是以字符串形式返回的，用引号括起来。

在 json 编码之前，您需要在 php 中将它们转换为整数，以便它们以不带引号的形式作为整数出现。

您应该会从中看到一个错误：http ://www.highcharts.com/errors/14

于 2013-04-05T13:37:09.797 回答
0

You are expecting $gkdata['grank'] to always return a number, it sometimes returns a dash -. The Array Object is using the datatype which best represents the data, and it chooses string. If you want to force it as int, you'll have to use a data structure that only allows integers to be put in it. Then it will puke when you try to put in a dash, which it should be doing, because how do you plot a DASH on a chart?

Had you taken off your blindfold, and looked at the error HighCharts returned to you, you would see this:

Highcharts Error #14 String value sent to series.data, expected Number

This happens if you pass in a string as a data point, for example in a setup like this:

series: [{
    data: ["3", "5", "1", "6"]
}]

Highcharts expects the data values to be numbers. The most common reason for this is that data is parsed from CSV or from a XML source, and the implementer forgot to run parseFloat on the parsed value.

For performance reasons internal type casting is not performed, and only the first value is checked (since 2.3).

So fix your code to make grank always a number. HighCharts won't plot strings for performance reasons.

于 2013-04-05T14:11:57.117 回答