Как отображать данные при использовании Rickshaw.Graph.Ajax

Question

1.) Как я могу получить доступ к данным с помощью нового Rickshaw.Graph.Ajax? Мой полный код ниже, в том числе набор образцов из JSON, который вызывается с помощью AJAX:

(function(){ 
    var ajaxGraph = new Rickshaw.Graph.Ajax({ 
     element: document.getElementById("chart"), 
     width: 400, 
     height: 200, 
     renderer: 'line', 
     dataURL: '/data.json', 
     onData: function(data) { 
      var arrData = []; 
      $.each(data[0], function(i, l){ 
       var rawData = l.data; 
       arrData.push(rawData); 
       return arrData; 
      }); 

     } 
    }); 

})(); 

// JSON SAMPLE

[{ 
    "took": 32, 
    "total": 34200, 
    "strokeVolume_count": { 
     "name": "strokeVolume_count", 
     "data": [ 
      {"x": 1387130400000,"y": 1800}, 
      {"x": 1387134000000,"y": 1800} 
     ] 
    } 
}] 

2.) Как я должен знать, когда использовать .render()? Я видел примеры того, как это используется на некоторых графиках, а не на других. Я прочитал документацию Rickshaw/github, объяснив, что вы используете ее для рисования или перерисовки графика, однако я видел, как другие примеры отображались без использования этого метода.

Answer 1

Я не совсем уверен, что вы подразумеваете под первым вопросом, но вам нужно вернуть массив объектов серии из функции onData.

Что касается вызова graph.render(), я имел успех размещение вызова в функции обратного вызова OnComplete как так:

(function(){ 
    var ajaxGraph = new Rickshaw.Graph.Ajax({ 
     element: document.getElementById("chart"), 
     width: 400, 
     height: 200, 
     renderer: 'line', 
     dataURL: '/data.json', 
     onData: function(data) { 
      return [{ 
       name : "Stroke Volume" 
       data : data[0].strokeVolume_count.data; 
      }]; 
      // or simply return [data[0].strokeVolume_count]; since it looks like a series object already 
     }, 
     onComplete: function() { 
      // this is also where you can set up your axes and hover detail 
      this.graph.render(); 
     } 
    }); 

})();