Question

Sencha Touch 2.1中的

如何从json动态加载图表，还有动态字段存储，图表轴和图表系列，

我知道这可能太多了，但我需要显示多种数据，如果我为每个显示器创建1个图表组件意味着我必须创建超过15个图表组件，我担心它会变得臃肿

Answer 1

我没有动态完成此操作，但我让它看起来很动态。

我首先请求用户填写表单。

我还有多个面板，它们以几种不同的布局形式保存带有空存储的图表。

根据用户的表单，只有在使用所需数据加载商店后才需要显示面板或图表时，我会显示和隐藏它们。

是的，它很笨重，而且它们是静态的，但我发现它比动态加载更容易处理。

修改

思考之后，

你试过像

这样的功能吗？

function dynamiccharts(var1, var2, var3){

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

}

变量包括数据，网址，商店等等。

Answer 2

这是我在面板上的控制器上创建图表的示例：轴，系列，存储字段，url成为参数，PAR_FORM是显示视图之间差异的全局变量，我将此代码用于另一个图表（Column，派）

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所需的交互功能，例如通过创建全局计数器变量

sencha触摸动态图表

2 个答案: