dynamic - 煎茶触摸动态图

Question

在 Sencha Touch 2.1 中，如何从 json 动态加载图表，以及动态字段存储、图表轴和图表系列，

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

Answer 1

我没有动态地完成这个，但我让它看起来是动态的。

我首先要求用户填写表格。

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

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

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

编辑

想了想，

你试过像这样的功能吗

function dynamiccharts(var1, var2, var3){

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

}

变量将包括数据、url、商店等。

Answer 2

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

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，例如通过创建全局计数器变量