laden eines extjs-Balkendiagramm-Beispiels in ein div-Tag

Question

Nur ein Neuling hier, der versucht, extjs 4.2.1 zu verstehen und daran zu arbeiten.Ich mag die Diagramme und Raster sehr und wollte sie in meine aktuelle Anwendung integrieren.Ich habe das Beispielraster in meiner Anwendung zum Laufen gebracht, aber das Diagramm erweist sich als etwas schwieriger.Ich habe den Beispielcode unter verwendet

Beispielcode

dadurch wird das Diagramm in einem anderen Fenster gerendert und ich habe mich gefragt, ob mir jemand helfen kann, dies in ein div-Tag auf einem meiner Panels einzufügen.

Hier ist der Container, den ich für das Diagramm habe:

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

und das Diagrammskript:Diagramm.js

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

Aussen.erfordern(['Ext.Fenster', 'Ext.fx.Ziel.Sprite', 'Ext.Layout.Container.Passen']);

Aussen.onReady(Funktion () { var Textbereich;

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

Aussen.definieren('Ext.Diagramm.Thema.CustomBlue', { erweitern:'Aussen.Diagramm.Thema.Basis',

    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

Sie haben das Problem nicht erklärt, aber es ist ziemlich klar, wenn Sie sich den Code ansehen.

Das Problem ist, dass Sie dem Diagramm eine Breite / Höhe geben müssen, da diese entsprechend dimensioniert werden müssen.Im ursprünglichen Beispiel in den Dokumenten werden die Dimensionen explizit von der bereitgestellt fit layout, das für das Fenster verwendet wird.