Question

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

我已经完成了一些基本的工作，我对图表的了解很少。

我尝试了其他可行的例子，但我无法弄清楚这个问题。控制台说：Uncaught TypeError：无法读取属性＆＃39; 1＆＃39;未定义的

我已经安装了ruby，指南针和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,

                }
            }
}]
}
});

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

我试用了一个应用程序，从商店绘制图表。它往往显示轴而不是图形线和点

1 个答案: