从 json 获取数据并且无法在 extjs 中显示正确的图形

Question

从 .json 文件中获取值后，我无法在 extjs 中显示图形。

请查找附件代码。

chart.json

        { "graphobject": 
           [
                { 'name': 'abc',   'data': 7 },
                { 'name': 'xyz', 'data': 5 },
                { 'name': 'mnop',  'data': 2 },
                { 'name': 'qrst',  'data':27 },
                { 'name': 'cde',  'data':20 }
                ]
        }

abc.js

                            Ext.require([
                'Ext.data.*',
                'Ext.chart.*',
                 'Ext.util.Point'   
            ]);
            Ext.onReady(function () {

            var tore = new Ext.data.JsonStore({
                url: 'chart.json',
                autoLoad: false,
                root: 'graphobject',     
                fields: ['name', 'data']
            });


             Ext.create('Ext.chart.Chart', {
                renderTo: Ext.getBody(),
                width: 500,
                height: 300,
                animate: true,
                store: tore,
                axes: [
                    {
                        type: 'Numeric',
                        position: 'left',

                        label: {
                            renderer: Ext.util.Format.numberRenderer('0,0')
                        },
                        title: 'Sample Values',
                        grid: true,
                    minimum: 0
                    },
                    {
                        type: 'Category',
                        position: 'bottom',

                        title: 'Sample Metrics'
                    }
                ],
                series: [
                    {
                        type: 'line',
                        highlight: {
                            size: 7,
                            radius: 7
                        },
                        axis: 'left',
                        xField: 'name',
                        yField: 'data',
                        markerConfig: {
                            type: 'cross',
                            size: 4,
                            radius: 4,
                            'stroke-width': 0
                        }
                    },

                ]
            });

            });

现在我可以得到折线图，但是值不正确。

你能帮我在 extjs 中获取正确的图表吗？

提前谢谢..

Answer 1

fields: ['name', 'date']

第二个字段不应该是“数据”而不是“日期”

我认为您的问题是您的 JsonDataStore 的 URL。您应该通过 Web 服务器获取 chart.json，而无需尝试直接读取它。希望这篇文章对你有所帮助。

Can't get jSon dataStore into ExtJS (Sencha Touch) chart: displays error "cannot read property 'length' of undefined"

Answer 2

请找到以下代码从 JSON 文件中获取代码并在 EXTJS 中显示图形。

        /*global Ext:false */
        Ext.onReady(function () {

            Ext.define('User', {
            extend: 'Ext.data.Model',
            fields: [ {
                name: 'name',
                type: 'string'
            }, {
                name: 'data',
                type: 'int'
            }]
        });

        var user = Ext.create('Ext.data.Store', {
                storeId: 'user',
                model: 'User',
                autoLoad: 'true',
                proxy: {
                    type: 'ajax',
                    url: 'example.json',
                    //url: 'https://dev26.opendev.dw.demandware.net/on/demandware.servlet/webdav/Sites/Impex/example.json',
                    reader: {
                        type: 'json',
                        root: 'graphobject'
                    }
                }
            });

        //Bar Chart
        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            animate: true,
            store: user,
            axes: [{
                type: 'Numeric',
                position: 'bottom',
               fields: ['data'],
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: 'Sample Values',
                grid: true,
                minimum: 0
            }, {
                type: 'Category',
                position: 'left',
               fields: ['name'],
                title: 'Sample Metrics'
            }],
            series: [{
                type: 'bar',
                axis: 'bottom',
                highlight: true,
                tips: {
                  trackMouse: true,
                  width: 140,
                  height: 28,
                  renderer: function(storeItem, item) {
                    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
                  }
                },
                label: {
                  display: 'insideEnd',
                    field: 'data',
                    renderer: Ext.util.Format.numberRenderer('0'),
                    orientation: 'horizontal',
                    color: '#333',
                    'text-anchor': 'middle'
                },
                xField: 'name',
                yField: 'data'
            }]
        });
        //Line Chart
        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            animate: true,
            store: user,
            axes: [
                {
                    type: 'Numeric',
                    position: 'left',
                    fields: ['data'],
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    title: 'Sample Values',
                    grid: true,
                    minimum: 0
                },
                {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Sample Metrics'
                }
            ],
            series: [
                {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    xField: 'name',
                    yField: 'data',
                    markerConfig: {
                        type: 'cross',
                        size: 4,
                        radius: 4,
                        'stroke-width': 0
                    }
                },
                {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    fill: true,
                    xField: 'name',
                    yField: 'data',
                    markerConfig: {
                        type: 'circle',
                        size: 4,
                        radius: 4,
                        'stroke-width': 0
                    }
                }
            ]
        });
        //pie chart

        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 350,
            animate: true,
            store: user,
            theme: 'Base:gradients',
            series: [{
                type: 'pie',
                angleField: 'data',
                showInLegend: true,
                tips: {
                    trackMouse: true,
                    width: 140,
                    height: 28,
                    renderer: function(storeItem, item) {
                        // calculate and display percentage on hover
                        var total = 0;
                        store.each(function(rec) {
                            total += rec.get('data');
                        });
                        this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
                    }
                },
                highlight: {
                    segment: {
                        margin: 20
                    }
                },
                label: {
                    field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '18px Arial'
                }
            }]
        });

        });