2011-11-29 2 views
2

저는 Sencha Touch 및 Sencha Touch 차트에 새로운 경험이 있으며, 저의 견해 중 하나에서 차트를 통합하는 데 어려움을 겪고 있습니다. 아마도 여기서 명백한 것이 빠져있을 것입니다. 다음은 변수 chart을 설정하는 방법입니다.Sencha Touch Charts가 렌더링되지 않습니다.

var chart2 = new Ext.chart.Chart({ 
    width: 500, 
    height: 300, 
    animate: true, 
    store: testStore, 
    theme: 'Base:gradients', 
    series: [{ 
     type: 'pie', 
     angleField: 'data1', 
     label: { 
      field: 'name', 
      display: 'rotate', 
      contrast: true, 
      font: '18px Arial' 
     } 
    }] 
}); 

의 데이터 저장소를로드하는 간단한 파이 차트 내 ChartViewPanel

SS.views.chartView = Ext.extend(Ext.Panel, { 

fullscreen: true, 
initComponent: function() { 

    console.log("Initializing Chart View"); 

    this.refreshButton = new Ext.Button({ 
     text: 'Refresh', 
     ui: 'action', 
     handler: function() { 
      console.log("Refresh button is clicked"); 
     }, 
     scope: this 
    }); 

    this.topToolbar = new Ext.Toolbar({ 
     title: 'Chart View', 
     items: [ 
      { xtype: 'spacer'}, 
      this.refreshButton 
     ] 
    }); 

    this.dockedItems = [this.topToolbar]; 

    this.items = [chart2]; 

    console.log(chart); 

    SS.views.chartView.superclass.initComponent.call(this); 
} 
}); 

상단 바 차트를 렌더링하지만되고 여기

var testStore = new Ext.data.JsonStore({ 
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], 
data: [ 
    {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, 
    {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, 
    {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, 
    {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, 
    {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} 
] 
}); 

에서 그리고. 자바 스크립트 콘솔에 오류가 표시되지 않습니다. 어느 시점에서 내가 잘못 갔습니까? 많은 감사

답변

0

chart2에 "renderTo"를 추가해야합니다. renderTo 사용하여 스타일

0

이 문제는 당신의 CSS 규칙에있을 수 있습니다 참조 : Ext.getBody을()와 추가 높이가 도움 와요 고마워요에 대한 차트 디스플레이의 문제를 해결!