2013-08-20 29 views
3

我试图用Rickshaw创建一些图表,用php中生成的ajax导入数据。人力车:多个系列不能正常工作的数据

如果我使用静态数据,图表显示; 如果我复制/粘贴在php中生成的数据(从控制台/日志()),图表显示; 如果我试图将数据放入一个变量中,并在js中使用该变量,它就不起作用。 :(

这是我从.php为得到我的控制台日志: (就像我说的,如果我复制粘贴代码块到.js文件替换“dataOutEvo”变种,该图显示,因为它。应该因此,我不认为数据是问题

[ 
     { 
      name: "ligne", 
      data: [{x:0,y:35},{x:1,y:34},{x:2,y:36},{x:3,y:35},{x:4,y:40},{x:5,y:35},{x:6,y:37},{x:7,y:40},{x:8,y:45},{x:9,y:46},{x:10,y:55},{x:11,y:63},{x:12,y:61},{x:13,y:45},{x:14,y:48},{x:15,y:49},{x:16,y:45},{x:17,y:44},{x:18,y:52},{x:19,y:43},{x:20,y:37},{x:21,y:36},{x:22,y:37},{x:23,y:34}], 
      color: palette.color() 
     }, 
     { 
      name: "ligne", 
      data: [{x:0,y:10},{x:1,y:15},{x:2,y:13},{x:3,y:15},{x:4,y:14},{x:5,y:16},{x:6,y:17},{x:7,y:25},{x:8,y:23},{x:9,y:24},{x:10,y:25},{x:11,y:28},{x:12,y:27},{x:13,y:21},{x:14,y:23},{x:15,y:19},{x:16,y:18},{x:17,y:16},{x:18,y:15},{x:19,y:14},{x:20,y:15},{x:21,y:16},{x:22,y:15},{x:23,y:16}], 
      color: palette.color() 
     }, 
     { 
      name: "ligne", 
      data: [{x:0,y:45},{x:1,y:49},{x:2,y:49},{x:3,y:50},{x:4,y:54},{x:5,y:51},{x:6,y:54},{x:7,y:65},{x:8,y:68},{x:9,y:70},{x:10,y:80},{x:11,y:91},{x:12,y:88},{x:13,y:66},{x:14,y:71},{x:15,y:68},{x:16,y:63},{x:17,y:60},{x:18,y:67},{x:19,y:57},{x:20,y:52},{x:21,y:52},{x:22,y:52},{x:23,y:50}], 
      color: palette.color() 
     }, 
     { 
      name: "ligne", 
      data: [{x:0,y:10},{x:1,y:15},{x:2,y:12},{x:3,y:5},{x:4,y:9},{x:5,y:15},{x:6,y:45},{x:7,y:125},{x:8,y:345},{x:9,y:256},{x:10,y:312},{x:11,y:345},{x:12,y:299},{x:13,y:165},{x:14,y:354},{x:15,y:368},{x:16,y:254},{x:17,y:213},{x:18,y:312},{x:19,y:165},{x:20,y:54},{x:21,y:32},{x:22,y:10},{x:23,y:5}], 
      color: palette.color() 
     }, 
     { 
      name: "ligne", 
      data: [{x:0,y:2},{x:1,y:3},{x:2,y:2},{x:3,y:1},{x:4,y:1},{x:5,y:2},{x:6,y:3},{x:7,y:15},{x:8,y:45},{x:9,y:27},{x:10,y:40},{x:11,y:42},{x:12,y:35},{x:13,y:18},{x:14,y:42},{x:15,y:40},{x:16,y:30},{x:17,y:25},{x:18,y:40},{x:19,y:20},{x:20,y:6},{x:21,y:4},{x:22,y:2},{x:23,y:1}], 
      color: palette.color() 
     } 
     ] 

而这正是出错的JS:

$(document).ready(function(){ 

    $.ajax({  
    url: 'dataOutEvo.php', //le fichier qui va nous fournir la réponse  
    success: function(data) {  
     var dataOutEvo = data; 
     console.log(dataOutEvo); 
     var palette = new Rickshaw.Color.Palette({ scheme: 'spectrum2001' }); 
     var graph = new Rickshaw.Graph({ 
      element: document.querySelector("#chart"), 
      width: 960, 
      height: 260, 
      renderer: 'line', 
      series: dataOutEvo 
     }); 

     graph.render(); 

     } 
    }); 

}); 

有人能告诉我什么不顺心吗?谢谢: )Mathieu


我问自己,如果现在我不应该走另一条路,使用此:

$fp = fopen('dataoutevo.json', 'w'); 
fwrite($fp, json_encode($js)); 
fclose($fp); 

这:

var palette = new Rickshaw.Color.Palette(); 
new Rickshaw.Graph.Ajax({ 

    element: document.getElementById("chart"), 
    width: 800, 
    height: 500, 
    renderer: 'line', 
    dataURL: 'dataoutevo.json', 
    onData: function(d) { 
    Rickshaw.Series.zeroFill(d); 
    return d; 
    }, 
    onComplete: function(transport) { 
    var graph = transport.graph; 
    var detail = new Rickshaw.Graph.HoverDetail({ graph: graph }); 
    } 

    }); 

但它仍然没有工作...有谁可以帮助我,告诉我我做错了什么?

+1

你能否解释多一点,你是什么意思时,你说 - _IF我尝试把DATAS到一个变量,并使用该变种在JS ,它只是不” WORK_ ,然后当你继续说 _if我复制的代码块粘贴到.js文件替换‘dataOutEvo’变种,该图显示,因为它应该)_ ? 我刚刚[** fiddled **](http://jsfiddle.net/srvikram13/Ar6BS/)你的代码与硬编码的数据,它似乎工作正常。 –

回答

0

使用你的第一个实现应该很好。我觉得你的问题是,当你拨打:

success: function(data) { 

从PHP返回的数据变量实际上是一个字符串(您可以检查此使用JavaScript函数) -

console.log(typeof(data)); 

在您应该将PHP代码可以返回一个(关联)数组,并确保您使用的json_encode()函数 -

echo json_encode($output); 

并在您的JS侧投用JSON.parse方法的返回的数据 -

var json_data = JSON.parse(data); 

希望帮助!

0

在您的第一个实现中,将数据类型添加到ajax调用中。

这应该很好地工作:

$(document).ready(function(){ 
    $.ajax({  
    url: 'dataOutEvo.php', //le fichier qui va nous fournir la réponse 
    dataType: 'json', 
    success: function(data) {  
     var dataOutEvo = data; 
     console.log(dataOutEvo); 
     var palette = new Rickshaw.Color.Palette({ scheme: 'spectrum2001' }); 
     var graph = new Rickshaw.Graph({ 
      element: document.querySelector("#chart"), 
      width: 960, 
      height: 260, 
      renderer: 'line', 
      series: dataOutEvo 
     }); 
     graph.render(); 
     } 
    }); 
}); 

通知的数据类型: 'JSON' 在$就调用

根据jQuery的文档,加入JSON数据类型

评估响应为JSON,并返回一个JavaScript对象。 JSON数据以严格的方式进行解析;任何畸形的JSON被拒绝 和解析错误,则会引发