煎茶觸摸動態圖表

在煎茶觸摸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

煎茶觸摸動態圖表

回答

相關問題