我正在尝试一个应用程序，该应用程序可以绘制商店中的图表。 它倾向于显示轴，但不显示图形线和点

Question

the store works fine for the rest of the app but im not able to use that data and plot that data in the graph.

i have done some basic work with the little knowledge i have with charts.

i tried out with other examples which work but im not able to figure out the problem with this. the console says:Uncaught TypeError: Cannot read property '1' of undefined

i have installed ruby,compass and sass

view:

Ext.define('CSBApp.view.graph', {
extend: 'Ext.chart.CartesianChart',
requires: [
    'Ext.TitleBar',
    'Ext.chart.CartesianChart',
    'Ext.chart.series.Line',
    'Ext.chart.axis.Numeric',
    'Ext.chart.axis.Category',
    'Ext.draw.sprite.Circle',

],
xtype: 'graph',
config: {
    flex: 1,
    xtype: 'chart',
    store: 'mystore',
    cls: 'chart',
    innerPadding: 10,
    animate: true,
    series: [
        {
            type: 'line',
            xField: 'date',
            yField: 'amount',
            title: 'Expenses',
            style: {
                stroke: '#003366',
                lineWidth: 3
            },
            marker: {
                type: 'circle',
                stroke: '#003366',
                radius: 5,
                lineWidth: 3
            }
        }
    ],
    axes: [
        {
            type: 'numeric',
            position: 'left',
            title: {
                fontSize: 15,
                text: 'Amount'
            },
            grid: {
                even: {
                    fill: '#f9f9f9'
                }
            }
        },
        {
            type: 'numeric',
            position: 'bottom',
            title: {
                fontSize: 15,
                text: 'date'
            },
            grid: {
                even: {
                    fill: '#f9f9f9'
                }
            }
        }
    ]
}
});

modal:

 Ext.define('CSBApp.model.expensemodel',{
 extend: 'Ext.data.Model',


   config: {

        identifier:{
          type:'uuid'
        },
       fields: [
        {
          name:'desc',
          type:'string'
        },

       {
          name: 'amount',
          type:'number'
       },
       {
          name: 'date',
          type:'date',
          defaultformat: 'Y-m-d' 
       },

       ],
       // autoLoad : true

 }
});

store:

Ext.define('CSBApp.store.mystore',{
extend : 'Ext.data.Store',

config : {
    model : 'CSBApp.model.expensemodel',
    storeId : 'mysqlstore',

    proxy : {
        type : 'sql',
        id : 'mystore',
        reader: {
            type: "sql"

        }

    },
    autoLoad : true
}
});

Answer 1

i have kind of figured it out. the basic problem resides in the view and how it calls the store. so the app seems to work fine with the sql store. the main factor is that the 'requires' files have to be correct.

here is the view:

Ext.define('CSBApp.view.graph', {
extend: 'Ext.chart.CartesianChart',
xtype: 'graph',

requires: [
    'Ext.chart.series.Line',
    'Ext.chart.axis.Numeric',
    'Ext.chart.axis.Category',
    'Ext.chart.CartesianChart',
    'Ext.chart.axis.layout.CombineDuplicate',
    'Ext.chart.axis.segmenter.Names'
],

config: {

   store:'mysqlstore' ,
   width : '100%',
   layout:'fit',
axes: [{
    type: 'numeric',
    position: 'left',
    title: {
        text: 'Sample Values',
        fontSize: 15
    },
    minimum:0,
    fields: 'amount'
    },

 {
    type: 'category',
    position: 'bottom',
    title: {
        text: 'Sample Values',
        fontSize: 15
    },
    fields: 'date',
    minimum:0,
}],
series: [{
    type: 'line',
    xField: 'date',
    yField: 'amount',
    minimum:0,
style: {
                stroke: '#003366',
                lineWidth: 3
            },

marker: {
                type: 'circle',
                stroke: '#003366',
                radius: 5,
                lineWidth: 3,

                }
            }
}]
}
});

this is pretty correct if you get the store rite.