散點圖：數據填充不正確（X/Y軸全爲零）

基本上，我商店的數據加載正確，但由於某種原因，數據未在圖表上正確繪製。散點圖：數據填充不正確（X/Y軸全爲零）

我用console.log來確定商店正確填充。當我檢查圖表上的元素時，我發現Dom元素的「circle」正在繪製，但未正確放置在圖表上;他們隱藏。然而，我在系列圖表中添加了一個渲染器，並且突然之間它開始繪製圓圈，除非它們都直接位於圖表的中間。如果我檢查這個元素，就會發現X精靈屬性都是0.因此，它們顯示在屏幕上，但沒有放在正確的位置。

基本上，這種方式的工作方式是屏幕呈現，用戶在他們想看什麼，商店被加載，以及一旦商店被加載後做出幾個選擇，我運行chart.redraw（）。但沒有任何繪製正確。這是適當的類。

我會注意到，返回的「date」字段作爲unix時間戳從服務器返回。適當的日期顯示在X軸標籤中，但圖表內的數據值點未正確繪製。

模型

Ext.define('RH.model.analytics.SitePenalty', { 
    extend : 'Ext.data.Model', 
    idProperty: 'date', 
    fields : [ 
     {name: 'change', type: 'float'}, 
     {name: 'date', type: 'date', dateFormat: 'timestamp'} 
    ] 
});

STORE

Ext.define('RH.store.analytics.SitePenalty', { 
    extend: 'Ext.data.Store', 
    storeId: 'sitePenaltyStore', 
    model: 'RH.model.analytics.SitePenalty', 
    sorters: [{ 
     property: 'date', 
     direction: 'ASC' 
    }], 
    autoLoad: false, 
    proxy: { 
     type: 'ajax', 
     url: '/analytics/penalty', 
     reader: { 
      type: 'json', 
      root: 'data' 
     } 
    } 
});

CHART

Ext.define('RH.view.analytics.PenaltyChart', { 
    extend: 'Ext.chart.Chart', 
    alias: 'widget.rh-analytics-penaltychart', 
    requires: ['Ext.chart.series.Scatter', 'Ext.chart.axis.Numeric', 'Ext.chart.axis.Category', 'RH.store.analytics.SitePenalty'], 
    title: 'Traffic Change', 
    style: 'background:#fff', 
    animate: true, 
    shadow: true, 
    store: 'sitePenaltyStore', 
    axes: [{ 
     type: 'Numeric', 
     position: 'left', 
     fields: ['change'], 
     /*label: { 
      renderer: Ext.util.Format.numberRenderer('0,0') 
     },*/ 
     title: 'Traffic Change (%)', 
     grid: true 
    }, { 
     type: 'Category', 
     position: 'bottom', 
     fields: ['date'], 
     title: 'Date' 
    }], 
    series: [{ 
     type: 'scatter', 
     xField: 'date', 
     yField: 'change', 
     axis: 'left', 
     markerConfig: { 
      radius: 5, 
      size: 5 
     }, 
     //When this is in place, all circles are drawn on top of each other in center 
     //of chart. When this renderer is missing, nothing is drawn on screen 
     renderer: function (sprite, record, attributes, index, store) { 
      console.log(sprite); 
      console.log(record); 

     } 
    }] 
});

**請注意**

在上述渲染方法（一例）： sprite.x = 0 sprite.y = 0 attributes.translate.x = 40296794232628.14 attributes.translate.y = 240.58000000000004

如若的那些屬性。翻譯值應用於精靈值？我從來不需要手動執行此操作，但是想知道是否有什麼內容被破壞導致這些值無法應用。另外，我甚至不知道sprite.x sprite.x & sprite.y不應總是爲零。只是在這裏猜測。

控制器代碼片段

Ext.getStore('sitePenaltyStore').load({ 
    scope: this, 
    params: {'acctId': acctId, 'propertyId': propertyId, 'viewId': viewId}, 
    callback: function() { 
     //Double checked here, data is loading into store just fine 
     console.log(Ext.getStore('sitePenaltyStore')); 
     this.getPenaltyChart().redraw(); 
    } 
});

來源

2014-07-21 Nathan

事實證明，對於日期，類別&時間軸只是不工作的權利。所以我必須做的是使用數字軸，並使用標籤渲染器將unix時間戳格式化爲日期。

這不是一個很好的解決方案，但是因爲我的其他軸「改變」的最大值爲1.0（使用百分比），所以我可以做一個簡單的if語句。如果這個數字足夠大，那可能是一個日期。

現在數據在圖表上正確繪製。

axes: [{ 
      type: 'Numeric', 
      position: 'left', 
      fields: ['change'], 
      /*label: { 
      renderer: Ext.util.Format.numberRenderer('0,0') 
      },*/ 
      title: 'Traffic Change (%)', 
      grid: true 
     }, { 
      type: 'Numeric', 
      position: 'bottom', 
      fields: ['date'], 
      title: 'Date', 
      label: { 
       renderer: function(v) { 
        if (v > 100) { 
         var date = new Date(v * 1000); 
         var newTime = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate(); 
         return newTime; 
        } 
        return v; 
       } 
      } 
     }],

來源

2014-07-23 01:41:01 Nathan

散點圖：數據填充不正確（X/Y軸全爲零）

回答

相關問題