cargando muestra de gráfico de barras extjs en una etiqueta div

Question

Solo soy un novato que intenta comprender y trabajar en extjs 4.2.1.Realmente me gustan los gráficos y las cuadrículas y quería incorporarlos a mi aplicación actual.Conseguí que la cuadrícula de muestra funcionara en mi aplicación, pero resulta ser un poco más difícil.Utilicé el código de muestra en

Código de muestra

que muestra el gráfico en otra ventana y me preguntaba si alguien puede ayudarme a ponerlo en una etiqueta div en uno de mis paneles.

Aquí está el contenedor que tengo para el gráfico:

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

y el guión del gráfico:gráficos.js

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

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

Ext.onReady(function () { var textArea;

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', { extender:'Base.tema.del.gráfico.ext',

    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

No explicaste cuál era el problema, sin embargo, queda bastante claro al mirar el código.

El problema es que debe darle al gráfico un ancho/alto, porque necesita que tengan el tamaño adecuado.En el ejemplo original de los documentos, las dimensiones las proporciona explícitamente el fit Diseño utilizado en la ventana.