1

.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で適切なグラフを取得するのを手伝ってください。

前もって感謝します..

4

2 に答える 2

1 
fields: ['name', 'date']

2 番目のフィールドは「日付」ではなく「データ」であってはなりません

あなたの問題は JsonDataStore の URL だと思います。直接読み取ろうとせずに、Web サーバー経由で chart.json を取得する必要があります。この投稿がお役に立てば幸いです。

jSon dataStore を ExtJS (Sencha Touch) チャートに取得できません: 「未定義のプロパティ '長さ' を読み取れません」というエラーが表示されます

于 2013-06-16T14:30:11.817 に答える
0

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'
                }
            }]
        });

        });
于 2013-06-28T09:30:11.210 に答える