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不會繪製字符串。