Javascript，使用Highcharts显示JSON数据排名图表

Question

我想使用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轴&上，它旁边的数字应该是等级编号。任何人都可以看到什么是错的？

Answer 1

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

编辑：

我不知道从什么您遇到的问题，但会从您的代码出现一个问题是，你的电话号码的数据值被返回的字符串，引号的文本。

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

你应该从这个看到一个错误：http://www.highcharts.com/errors/14

Answer 2

你期待$gkdata['grank']总是返回一个数字，它有时会返回一个破折号-。 Array对象使用最能代表数据的数据类型，并选择字符串。如果你想强制它为int，你将不得不使用一个只允许整数的数据结构。然后当你尝试投入一个短跑时，它会呕吐，因为你怎么在图表上绘制DASH？

假如你采取了你的眼罩，看着HighCharts返回给你的错误，你会看到：发送到series.data

Highcharts错误＃14字符串值，预期数量

出现这种情况，如果你在传递一个字符串作为一个数据点，例如在这样的设置：

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

Highcharts预计该数据值是数字。最常见的原因是数据是从CSV或XML源解析的，而实现者忘记在解析的值上运行parseFloat。

由于性能原因，不执行内部类型转换，只检查第一个值（自2.3开始）。

因此修复您的代码以使grans始终为数字。由于性能原因，HighCharts不会绘制字符串。