extjs棒グラフのサンプルをDIVタグにロードします

Question

ここでのニュービーは、extjs 4.2.1で理解し、働くことを試みています。私は本当にチャートやグリッドが好きで、それらを私の現在のアプリケーションに組み込むことを望んでいました。サンプルグリッドが私のアプリケーションで動作するようになったが、チャートは少し難しいことが判明した。

でサンプルコードを使用しました

サンプルコード

チャートを別のウィンドウにレンダリングし、誰かが私が私のパネルの1つのDIVタグにこれを置くことができるかどうか疑問に思いました。

これは私がチャートに持っているコンテナです：

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

.

とチャートスクリプト：charts.js

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

.

ext.require（['ext.window'、 'ext.fx.target.sprite'、 'ext.layout.container.fit']）;;

ext.onready（関数（）{ 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' '、{ 拡張： '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

あなたは問題が何であるか説明しなかったが、コードを見ることからかなり明確である。

問題は、チャートに幅/高さを与える必要があるということです。ドキュメントの元の例では、ディメンションはウィンドウで使用されるfitレイアウトによって明示的に提供されます。