extjs

Question

我正在尝试使用图表视图并将其存储为变量并从 php 加载数据以输出有效 json。我决定使用它，因为我想根据不同的提交值显示不同的图表。

    Ext.require('Ext.chart.*');
    Ext.require('Ext.layout.container.Fit');

    window.store1 = Ext.create('Ext.data.Store', {
        extend: 'Ext.data.Store',
        autoload: true,
        idProperty: 'name',
        fields: [{
            name: "name",
            type: "Category"
        }, {
            name: "mangrove_area",
            type: "integer"
        }],

        data: [{ 
            "name": "Kenya",
            "mangrove_area": 295.3404
        }, {
            "name": "Tanzania",
            "mangrove_area": 821.6568
        }, {
            "name": "Mozambique",
            "mangrove_area": 2185.6
        }, {
            "name": "Madagascar",
            "mangrove_area": 1831.8
        }]
    });
    window.store2 = Ext.create('Ext.data.Store', {

        extend: 'Ext.data.Store',
        fields: [
                    { name: "name", type: "Category" },
                    { name: "mangrove_area", type: "integer" }
         ],
         autoload:true, 
         proxy: {
            type: 'ajax',
            url: 'data/webmapping/coastaleco_mangroves_chart.php',
            reader: {
                type: 'json'
            }
        }

    });


    var chart = Ext.create('Ext.chart.Chart', {
        xtype: 'chart',
        id: 'EcoChartId',
        style: 'background:#fff',
        animate: true,
        store: store2,

        legend: {
            position: 'top',
            visible: true
        },
        axes: [{
            type: 'Category',
            position: 'left',
            fields: ['name'],
            title: 'Countries',
            grid: true,
            minimum: 0
        }, {
            type: 'Numeric',
            position: 'bottom',
            fields: ['mangrove_area'],
            title: 'Area (Sq. Km)'
        }],
        series: [{
            type: 'bar',
            axis: 'left',
            highlight: true,
            stacked: true,
            tips: {
                trackMouse: true,
                width: 250,
                height: 28
            },

            label: {
                display: 'insideEnd',
                field: 'mangrove_area',
                orientation: 'horizontal',
                color: '#333',
                    'text-anchor': 'middle'
            },
            xField: 'name',
            yField: 'mangrove_area',
            title: 'Mangroves Area'
        }]
    });


    var win2 = new Ext.Window({
        extend: 'Ext.window.Window',
        frame: true,
        width: 500,
        height: 350,
      layout: 'border',
          items: [chart]
    });
    win2.show();

从 php 输出的

Json 与存储

中的数据相同

 [{
        "name": "Kenya",
        "mangrove_area": 295.3404
    }, {
        "name": "Tanzania",
        "mangrove_area": 821.6568
    }, {
        "name": "Mozambique",
        "mangrove_area": 2185.6
    }, {
        "name": "Madagascar",
        "mangrove_area": 1831.8
 }]

工作商店是商店 1。有没有办法让 store2 工作？

我的extjs版本是4.2.1。

Answer 1

解决方案是将上面的整个代码打包到一个函数中，然后在按钮点击函数中调用该函数。

extjs - 使用 php 作为变量加载图表 data.store

extjs - load chart data.store using php as a variable

php

charts

extjs4

extjs4.2