2011-08-16 44 views
1

編輯:已答覆 已解決。發佈到堆棧溢出實際上指出了我的答案!無法將外部數據導入ExtJS(Sencha Touch)圖表

基本上它看起來有一些關於Sencha Touch的Ext.data.JsonStore有趣。也許一些默認值不完全符合預期。 重命名的文件,以test.json(不知道這是neccessary)

下面的代碼從How to parse this format of xml data?工作,

Ext.regModel('tester', { 
     idProperty: 'name', 
     fields: ['name', 'data1', 'data2', 'data3'] 
    }); 
     var store = new Ext.data.Store({ 
     model: 'tester', 
     autoLoad: true, 
     proxy: { 
      type: 'ajax', 
      method: 'GET', 
      url: 'test.json', 
      reader: { 
       type: 'json', 
       root: 'test' 
      } 
     }, 
     listeners: { 
      load: function(obj, records){ 
       Ext.each(records, function(rec){ 
        console.log(rec.get('name')); 
       }); 
      } 
     } 
    }); 

原來的問題

我敢肯定有一些重大的事情我沒有做對,但我無法從JSON源獲取數據到圖表。

這是我的商店代碼,下面哪個不起作用。

window.store1 = new Ext.data.JsonStore({ 
     autoload: true, 
     url: 'test.php', 
     root: 'test', 
     idProperty: 'name',  
     fields: ['name', 'data1', 'data2', 'data3'] 
    }); 

其中

test.php的=

{ "test" : { 
     "data": [ 
      { "name": "Mon", "data1":47.5, "data2":20, "data3":10}, 
       { "name": "Tue", "data1":30, "data2":30, "data3":30}, 
       { "name": "Wed", "data1":31.1, "data2":40, "data3":20}, 
       { "name": "Thu", "data1":21.1, "data2":20, "data3":30}, 
       { "name": "Fri", "data1":20.7, "data2":20, "data3":10}, 
       { "name": "Sat", "data1":22.4, "data2":30, "data3":30}, 
       { "name": "Sun", "data1":28.3, "data2":40, "data3":20} 


     ] 
    } 
    } 

如果我的手在代碼像下面的圖表系列的數據被正確地繪製。

window.store1 = new Ext.data.JsonStore({ 

      fields: ['name', 'data1', 'data2', 'data3'], 
      data: [ 
      { "name": "Mon", "data1":47.5, "data2":20, "data3":10}, 
      { "name": "Tue", "data1":30, "data2":30, "data3":30}, 
      { "name": "Wed", "data1":31.1, "data2":40, "data3":20}, 
      { "name": "Thu", "data1":21.1, "data2":20, "data3":30}, 
      { "name": "Fri", "data1":20.7, "data2":20, "data3":10}, 
      { "name": "Sat", "data1":22.4, "data2":30, "data3":30}, 
      { "name": "Sun", "data1":28.3, "data2":40, "data3":20} 
      ] 
     }); 

的圖表演示(新煎茶觸摸圖表)產生具有像這樣的例子的數據陣列和我不能找到用於經由簡單的JSON源填充一個例子。

window.generateData = function(n, floor) { 
      var data = [], 
       p = (Math.random() * 11) + 1, 
       i; 

      floor = (!floor && floor !== 0) ? 20 : floor; 

      for (i = 0; i < (n || 12); i++) { 
       data.push({ 
        name: Date.monthNames[i % 12], 
        2008: Math.floor(Math.max((Math.random() * 100), floor)), 
        2009: Math.floor(Math.max((Math.random() * 100), floor)), 
        2010: Math.floor(Math.max((Math.random() * 100), floor)), 
        data1: Math.floor(Math.max((Math.random() * 100), floor)), 
        data2: Math.floor(Math.max((Math.random() * 100), floor)), 
        data3: Math.floor(Math.max((Math.random() * 100), floor)), 
        data4: Math.floor(Math.max((Math.random() * 100), floor)), 
        data5: Math.floor(Math.max((Math.random() * 100), floor)), 
        data6: Math.floor(Math.max((Math.random() * 100), floor)), 
        data7: Math.floor(Math.max((Math.random() * 100), floor)), 
        data8: Math.floor(Math.max((Math.random() * 100), floor)), 
        data9: Math.floor(Math.max((Math.random() * 100), floor)), 
        time: Math.floor(Math.max((Math.random() * 100), floor)), 
        registrations: Math.floor(Math.max((Math.random() * 100), floor)), 
        hours: Math.floor(Math.max((Math.random() * 100), floor)), 
        iphone: Math.floor(Math.max((Math.random() * 100), floor)), 
        android: Math.floor(Math.max((Math.random() * 100), floor)), 
        ipad: Math.floor(Math.max((Math.random() * 1000), floor)) 
       }); 
      } 
      return data; 
     }; 

window.store2 = new Ext.data.JsonStore({ 
      fields: ['name', '2008', '2009', '2010', 'data4', 'data5', 'data6', 'data7', 'data8', 'data9'], 
      data: generateData(6, 20) 
     }); 

我真的很感激,如果有人能指出我正確的方向,爲什麼系列數據沒有加載。

回答

0

我假設你有正確的路徑到test.php,你並沒有試圖從不同的網站打開它。你的JSON有效嗎?你可以檢查(像FireBug的東西),test.php加載好嗎?

我會將數字值用引號括起來("),只是爲了安全起見。

+0

我認爲你是對的,它不加載test.php。這當前在本地服務器上。請問在php文件中的json是否需要封裝在標籤中? – Alistair

+0

@Alistair你可以在普通的瀏覽器窗口/標籤中打開'test.php'嗎?使用https://addons.mozilla.org/en-US/firefox/addon/jsonview/查看/檢查JSON。 – Vlad

0

使用模型,正確配置代理和閱讀器。我相信你的根必須test.data

2
window.generateData = function() { 
     var data = [{name:"January", iphone:43, android:70, blackberry:20}, {name:"February", iphone:23, android:10, blackberry:20}, {name:"March", iphone:64, android:47, ipad:66, blackberry:20}, {name:"April", iphone:12, android:29, ipad:67, blackberry:20}, {name:"May", iphone:62, android:97, ipad:94, blackberry:20}]; 
     return data;   
     };