Sencha chart에서 데이터 바인딩하기

store 참조

Ext.define('MyApp.store.ChartStore', {
    extend: 'Ext.data.Store',
    alias: 'store.chartstore',

    fields: ['name', 'value'],  // Define fields for the data

    data: [
        { name: 'Category 1', value: 30 },
        { name: 'Category 2', value: 45 },
        { name: 'Category 3', value: 25 }
    ]
});

Ext.create({
    xtype: 'cartesian',
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,

    store: {
        type: 'chartstore'  // Use the store defined above
    },

    axes: [
        {
            type: 'numeric',
            position: 'left',
            title: 'Values'
        },
        {
            type: 'category',
            position: 'bottom',
            title: 'Categories',
            fields: 'name'  // Field for the x-axis
        }
    ],

    series: [
        {
            type: 'bar',  // Choose the series type (bar, line, etc.)
            xField: 'name',  // Field for x-axis
            yField: 'value', // Field for y-axis
            style: {
                fill: '#a2b5ca'
            }
        }
    ]
});

bind 참조

// Define a ViewModel with data and store
Ext.define('MyApp.view.MyViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.myviewmodel',

    data: {
        title: 'My Chart Title',
        description: 'Description of the chart'
    },

    stores: {
        chartStore: {
            fields: ['name', 'value'],
            data: [
                { name: 'Category 1', value: 30 },
                { name: 'Category 2', value: 45 },
                { name: 'Category 3', value: 25 }
            ]
        }
    }
});


Ext.define('MyApp.view.MyChart', {
    extend: 'Ext.panel.Panel',
    xtype: 'mychart',

    // Include the ViewModel
    viewModel: {
        type: 'myviewmodel'  // Use the alias of the ViewModel
    },

    title: 'Chart Example',

    items: [
        {
            xtype: 'cartesian',
            bind: {
                title: '{title}',  // Bind title from ViewModel data
                store: '{chartStore}'  // Bind store from ViewModel stores
            },
            width: 600,
            height: 400,
            axes: [
                {
                    type: 'numeric',
                    position: 'left',
                    title: 'Values'
                },
                {
                    type: 'category',
                    position: 'bottom',
                    title: 'Categories',
                    fields: 'name'
                }
            ],
            series: [
                {
                    type: 'bar',
                    xField: 'name',
                    yField: 'value',
                    style: {
                        fill: '#a2b5ca'
                    }
                }
            ]
        }
    ]
});