煎茶触摸动态图表

在煎茶触摸2.1我怎么能动态地从JSON加载图表，也与动态字段存储，图表轴，和图表系列，煎茶触摸动态图表

我知道这也许是太多了，但我需要显示许多种类的数据，如果我创建1个图表组件的每个显示器意味着我必须创造超过15图表组件，恐怕会变得过于庞大

来源

2012-11-16 Aditia Rahman

我没有动态完成这一点，但我做到了似乎动态。

我第一请求用户填写表格。

我也有持有空店的图表，在几个不同的布局形式的多个面板。

基于用户的形态上，我显示和隐藏面板，或图表时，他们需要与所需的数据加载存储后，才显示。

是的，它是体积大，它们是静态的，但我发现它稍微容易比动态加载处理。

编辑

思前想后，

你尝试过像

功能

function dynamiccharts(var1, var2, var3){ 

return Ext.chart.Chart({ 
.... 
}) 

}

变量将包括像数据，URL，商店或等

来源

2012-11-16 20:30:51 Sno

您好，感谢您的想法，我使用破坏图表重用一个图表在同一面板等，this.getBarchartview（）除去（Ext.getCmp（ 'barchartgenerateview'），TRUE）;其中this.getBarchartview（）是一个面板，以及用于创建图表this.getBarchartview（）添加（新Ext.chart.CartesianChart（{......}）。 –

这是我的榜样在面板上的控制器上创建图表：axis，series，store fields，url成为参数，PAR_FORM是全局变量，显示vi ews，我将此代码用于另一个图表（Column，Pie）

Ext.define("Geis.controller.app", { 
extend: "Ext.app.Controller", 
config: { 
    refs: { 
     mainview: 'mainview', 
     barchartview: 'barchartview', 
     btnShowChartAnggaran: '#btnShowChartAnggaran' 
    }, 
    control: { 
     'btnShowChartAnggaran': { 
      tap: 'onShowChartAnggaran' 
     } 
    } 
} 

createBarChart: function(fields, series_xfield, series_yfield, url) { 
    this.getBarchartview().add(new Ext.chart.CartesianChart({ 
     id: 'barchartgenerateview', 
     store: { 
      fields: fields, 
      proxy: { 
       type: 'jsonp', 
       url: url 
      } 
     }, 
     background: 'white', 
     flipXY: true, 
     colors: Geis.view.ColorPatterns.getBaseColors(), 
     interactions: [ 
      { 
       type: 'panzoom', 
       axes: { 
        "left": { 
         allowPan: true, 
         allowZoom: true 
        }, 
        "bottom": { 
         allowPan: true, 
         allowZoom: true 
        } 
       } 
      }, 
      'itemhighlight' 
     ], 
     series: [{ 
      type: 'bar', 
      xField: series_xfield, 
      yField: series_yfield, 
      highlightCfg: { 
       strokeStyle: 'red', 
       lineWidth: 3 
      }, 
      style: { 
       stroke: 'rgb(40,40,40)', 
       maxBarWidth: 30 
      } 
     }], 
     axes: [{ 
      type: 'numeric', 
      position: 'bottom', 
      fields: series_yfield, 
      grid: { 
       odd: { 
        fill: '#e8e8e8' 
       } 
      }, 
      label: { 
       rotate: { 
        degrees: -30 
       } 
      }, 
      maxZoom: 1 
     }, 
     { 
      type: 'category', 
      position: 'left', 
      fields: series_xfield, 
      maxZoom: 4 
     }] 
    })); 
    Ext.getCmp('barchartgenerateview').getStore().load(); 
}, 

onShowChartAnggaran: function() { 
    this.getBarchartview().remove(Ext.getCmp('barchartgenerateview'), true); 
    if (PAR_FORM == 'Dana Anggaran') { 
     this.createBarChart(['kode', 'keterangan', 'nilai'], 'keterangan', 'nilai', 
      Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_dana_anggaran_json/'); 
    } else if (PAR_FORM == 'Alokasi Anggaran') { 
     this.createBarChart(['kode', 'keterangan', 'belanja_pegawai', 'belanja_barang', 'belanja_modal'], 
      'keterangan', ['belanja_pegawai', 'belanja_barang', 'belanja_modal'], 
      Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_alokasi_json/'); 
    } 

    this.getMainview().animateActiveItem(1, {type:'slide', direction:'left'}); 
}

}）;对，如果你要激活的相互作用我的实验

基地功能，你需要动态设置图表ID过，例如在建立全球反变

来源

2012-11-21 05:58:55

煎茶触摸动态图表

回答

相关问题