Sencha使用存儲數據的曲線圖 - Sencha touch

Question

這裏我有以下JSON數據，使用這個我必須創建Chart View。

Ext.data.JsonP.callback12({"totalCount":0,"success":true,"message":"Successfully retrieved data for report #1", 
"content": { 
"fields":["name","2014","2013","2012"], 
"data":[{"name":"1","2012":208.95,"2013":229.92,"2014":0}, 
{"name":"2","2013":265.92,"2014":0,"2012":0}, 
{"name":"3","2012":227.98,"2013":558.13,"2014":0}, 
{"name":"4","2012":390,"2013":282.09,"2014":0}, 
{"name":"5","2013":461.1}, 
{"name":"6","2012":396.8,"2013":427.2,"2014":0}, 
{"name":"7","2012":305.48,"2013":110.76,"2014":0}, 
{"name":"8","2012":379.35,"2013":428.46,"2014":0}, 
{"name":"9","2012":206.5,"2013":535.35,"2014":0}, 
{"name":"10","2012":376,"2013":168.51,"2014":0}, 
{"name":"11","2012":275.28,"2013":231.93,"2014":0}, 
{"name":"12","2012":195.75,"2013":340.94,"2014":0}]}}) 

通過上述JSON我想畫一個圖，現在的問題是，圖表工作正常，如果我給rootProperty：「content.data」在我的商店，並添加靜態字段（字段：2014年， 2013,2012]）在我看來。但是我希望從存儲中動態添加我的字段，並給出rootProperty：'content'，以便我可以在圖表（軸和系列）中使用字段和數據。我添加了我的圖表視圖。請幫助我如何將上述字段和數據添加到我的圖表。

查看

Ext.define('Sample.view.ChartsView', { 
    extend: 'Ext.Panel', 
    xtype: 'myreportsview', 

    requires: ['Ext.chart.axis.Numeric', 'Ext.data.JsonStore', 'Ext.chart.CartesianChart'], 
    config: { 
    title: 'Reports', 
    iconCls: 'icon-stats', 
    layout: 'fit', 
    fullscreen: true, 
    items: [ 
     { 
      xtype: 'chart', 
      style: 'background:#fff', 
      store: 'YearlyReports', 
      animate: true, 
      theme: 'category1', 
      legend: { 
       position: 'bottom' 
      }, 
      axes: [ 
       { 
        type: 'numeric', 
        position: 'left', 
        fields: ['2012', '2013', '2014'], -- these fields should be added from store 
        title: 'Purchases', 
        minorTickSteps: 1, 
        grid: { 
         odd: { 
          opacity: 1, 
          fill: '#ddd', 
         } 
        }, 
        style: { 
         axisLine: false, 
         estStepSize: 20, 
         stroke: '#ddd', 
         'stroke-width': 0.5 
        }, 

       }, 
       { 
        type: 'category', 
        position: 'bottom', 
        fields: ['name'], 
        title: 'Month of the Year', 
        style: { 
         estStepSize: 1, 
         stroke: '#999' 
        } 
       } 
      ], 
      series: [ 
       { 
        type: 'line', 
        xField: 'name', 
        yField: '2012', 
        highlightCfg: { 
         scale: 7 
        }, 
        axis: 'left', 
        style: { 
         smooth: true, 
         stroke: '#94ae0a', 
         lineWidth: 3, 
         shadowColor: 'rgba(0,0,0,0.7)', 
         shadowBlur: 10, 
         shadowOffsetX: 3, 
         shadowOffsetY: 3 
        }, 
        marker: { 
         type: 'circle', 
         stroke: '#94ae0a', 
         fill: '#94ae0a', 
         lineWidth: 2, 
         radius: 4, 
         shadowColor: 'rgba(0,0,0,0.7)', 
         shadowBlur: 10, 
         shadowOffsetX: 3, 
         shadowOffsetY: 3, 
         fx: { 
          duration: 300 
         } 
        } 
       }, 
       { 
        type: 'line', 
        smooth: true, 
        xField: 'name', 
        yField: '2013', 
        highlightCfg: { 
         scale: 7 
        }, 
        axis: 'left', 
        style: { 
         stroke: '#a61120', 
         lineWidth: 3, 
         shadowColor: 'rgba(0,0,0,0.7)', 
         shadowBlur: 10, 
         shadowOffsetX: 3, 
         shadowOffsetY: 3 
        }, 
        marker: { 
         type: 'circle', 
         stroke: '#a61120', 
         fill: '#a61120', 
         lineWidth: 2, 
         radius: 4, 
         shadowColor: 'rgba(0,0,0,0.7)', 
         shadowBlur: 10, 
         shadowOffsetX: 3, 
         shadowOffsetY: 3, 
         fx: { 
          duration: 300 
         } 
        } 
       }, 
       { 
        type: 'line', 
        smooth: true, 
        xField: 'name', 
        yField: '2014', 
        highlightCfg: { 
         scale: 7 
        }, 
        axis: 'left', 
        style: { 
         fill: "#115fa6", 
         stroke: "#115fa6", 
         fillOpacity: 0.6, 
         miterLimit: 3, 
         lineCap: 'miter', 
         lineWidth: 2 
        }, 
        marker: { 
         type: 'circle', 
         stroke: '#0d1f96', 
         fill: '#115fa6', 
         lineWidth: 2, 
         radius: 4, 
         shadowColor: 'rgba(0,0,0,0.7)', 
         shadowBlur: 10, 
         shadowOffsetX: 3, 
         shadowOffsetY: 3, 
        } 
       } 
      ] 
     } 
    ] 
} 
}); 

Answer 1

這可能是那些誰想要動態添加圖表有用。用以上數據創建商店（'YearlyReports'）。

在面板

  { 
      xtype: 'chart', 
      id: 'yearlyChart', 
      style: 'background:#fff', 
      store: {}, 
      animate: true, 
      theme: 'category1', 
      legend: { 
       position: 'bottom' 
      } 

寫在CONFIG-聽衆以下繪功能

 listeners: { 
     painted: function() { 
      var store = Ext.getStore('YearlyReports').getAt(0).data, 
       chart = Ext.getCmp('yearlyChart'), 
       seriesArray = new Array(), 
       axesArray = new Array(), 
       fields = new Array(), 
       lineColors = ['#115fa6','#94ae0a','#a61120'], 
       markerColors = ['#94ae0a', '#a61120', '#115fa6']; 

      for(var j=1;j<store.fields.length;j++) { 

       fields.push(store.fields[j]); 
       seriesArray.push(
        new Ext.chart.series.Line({ 
         type: 'line', 
         yField: [store.fields[j]], 
         xField: 'name', 
         stacked: false, 
         style: { 
          smooth: true, 
          stroke: lineColors[j-1], 
          lineWidth: 3, 
          shadowColor: 'rgba(0,0,0,0.7)', 
          shadowBlur: 10, 
          shadowOffsetX: 3, 
          shadowOffsetY: 3 
         }, 
         marker: { 
          type: 'circle', 
          stroke: markerColors[j-1], 
          fill: markerColors[j-1], 
          lineWidth: 2, 
          radius: 4, 
          shadowColor: 'rgba(0,0,0,0.7)', 
          shadowBlur: 10, 
          shadowOffsetX: 3, 
          shadowOffsetY: 3, 
          fx: { 
           duration: 300 
          } 
         } 
       })); 
      } 
      axesArray.push(
       new Ext.chart.axis.Numeric({ 
        type: 'numeric', 
        position: 'left', 
        fields: fields, 
        title: 'Purchases', 
        minorTickSteps: 1, 
        grid: { 
         odd: { 
          opacity: 1, 
          fill: '#ddd', 
         } 
        }, 
        style: { 
         axisLine: false, 
         estStepSize: 20, 
         stroke: '#ddd', 
         'stroke-width': 0.5 
        }, 
       }) 
      ); 

      axesArray.push(
       new Ext.chart.axis.Category({ 
        type: 'category', 
        position: 'bottom', 
        fields: ['name'], 
        title: 'Month of the Year', 
        style: { 
         estStepSize: 1, 
         stroke: '#999' 
        } 
       }) 
      ); 
      var data = {"data" : store.data}; 
      chart.setStore(data); 
      chart.setAxes(axesArray); 
      chart.setSeries(seriesArray); 
     } 
    }, 

圖表