chargement d'un exemple de graphique à barres extjs dans une balise div

Question

Juste un débutant ici essayant de comprendre et de travailler sur extjs 4.2.1.J'aime beaucoup les graphiques et les grilles et je voulais les intégrer dans mon application actuelle.J'ai fait fonctionner la grille d'échantillons dans mon application, mais le graphique s'avère un peu plus difficile.J'ai utilisé l'exemple de code sur

exemple de code

qui affiche le graphique dans une autre fenêtre et je me demandais si quelqu'un pouvait m'aider à le mettre dans une balise div sur l'un de mes panneaux.

Voici le conteneur que j'ai pour le graphique :

<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false">
         <div id="container"></div>
</div>

et le script du graphique :graphiques.js

Ext.require('Ext.chart.*');

Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);

Ext.onReady(function () { var zoneTexte ;

var store = new Ext.data.JsonStore({
    fields: ['name', 'visits', 'views'],
    data: [
        { name: 'Jul 07', visits: 245000, views: 3000000 },
        { name: 'Aug 07', visits: 240000, views: 3500000 },
        { name: 'Sep 07', visits: 355000, views: 4000000 },
        { name: 'Oct 07', visits: 375000, views: 4200000 },
        { name: 'Nov 07', visits: 490000, views: 4500000 },
        { name: 'Dec 07', visits: 495000, views: 5800000 },
        { name: 'Jan 08', visits: 520000, views: 6000000 },
        { name: 'Feb 08', visits: 620000, views: 7500000 }
    ]
});

Ext.define('Ext.chart.theme.CustomBlue', { étendre:'Ext.chart.theme.Base',

    constructor: function (config) {
        var titleLabel = {
            font: 'bold 18px Arial'
        }, axisLabel = {
            fill: 'rgb(8,69,148)',
            font: '12px Arial',
            spacing: 2,
            padding: 5
        };

        this.callParent([Ext.apply({
            axis: {
                stroke: '#084594'
            },
            axisLabelLeft: axisLabel,
            axisLabelBottom: axisLabel,
            axisTitleLeft: titleLabel,
            axisTitleBottom: titleLabel
        }, config)]);
    }
});

var chart = Ext.create('Ext.chart.Chart', {
    animate: true,
    shadow: true,
    store: store,
    axes: [{
        type: 'Numeric',
        position: 'bottom',
        fields: ['data1'],
        label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },
        title: 'Number of Hits',
        grid: true,
        minimum: 0
    }, {
        type: 'Category',
        position: 'left',
        fields: ['name'],
        title: 'Month of the Year'
    }],
    theme: 'CustomBlue',
    background: {
        gradient: {
            id: 'backgroundGradient',
            angle: 45,
            stops: {
                0: {
                    color: '#ffffff'
                },
                100: {
                    color: '#eaf1f8'
                }
            }
        }
    },
    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('data1') + ' views');
            }
        },
        label: {
            display: 'insideEnd',
            field: 'data1',
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'horizontal',
            color: '#333',
            'text-anchor': 'middle'
        },
        xField: 'name',
        yField: ['data1']
    }]
      renderTo: "container"
});

});

Answer 1

Vous n'avez pas expliqué quel était le problème, mais c'est assez clair en regardant le code.

Le problème est que vous devez donner au graphique une largeur/hauteur, car il en a besoin pour être dimensionné de manière appropriée.Dans l'exemple original de la documentation, les dimensions sont fournies explicitement par le fit disposition utilisée sur la fenêtre.