charts - 我正在尝试一个从商店绘制图表的应用程序。它倾向于显示轴而不是图形线和点

Question

该商店适用于应用程序的其余部分，但我无法使用该数据并在图表中绘制该数据。

我已经用我对图表的一点了解做了一些基本的工作。

我尝试了其他有效的示例，但我无法找出问题所在。控制台说：Uncaught TypeError: Cannot read property '1' of undefined

我已经安装了 ruby​​、compass 和 sass

看法：

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

模态：

 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

 }
});

店铺：

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

我有点想通了。基本问题在于视图以及它如何调用商店。所以该应用程序似乎可以与 sql 商店一起正常工作。主要因素是“要求”文件必须是正确的。

这是视图：

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,

                }
            }
}]
}
});

如果您获得商店仪式，这是非常正确的。