这是我的观点：
（图表相关代码在创建的asterix行结束）
Ext.define('denovoeye.view.OcularPressure', {
extend: 'Ext.navigation.View',
xtype: 'ocularPressure',
config: {
scrollable: {
direction: 'vertical'
},
items: [{
xtype: 'container',
fullscreen: true,
layout: 'vbox',
items: [{
style: 'background-color:#72D2D4;',
flex: 1,
items: [{
xtype: 'component',
flex: 1,
html: '<div style="text-align:left;padding : 20px 0px 0px 20px;color:#120963;"> INTRA OCULAR PRESSURE</div>',
}, {
xtype: 'chart',
store: 'OcularPressure',
flex: 5,
layout: 'fit',
animate: false,
interactions: ['panzoom'],
series: [
{
type: 'line',
xField: 'name',
yField: 'g1',
title: 'Line1',
style: {
lineWidth: 2,
stroke: 'rgba(0,40,170,0.7)'
}
},
{
type: 'line',
xField: 'name',
yField: 'g2',
title: 'Line2',
style: {
lineWidth: 2,
stroke: 'rgba(80,40,170,0.7)'
}
}
],
axes: [
{
type: 'numeric',
position: 'left',
grid: true
},
{
type: 'category',
position: 'bottom',
grid: true,
visibleRange: [0, 0.5]
}
]
},
//******************************************************************************************
{
xtype: 'container',
flex: 1,
layout: 'hbox',
style: 'margin:20px 20px 20px 20px;',
items: [{
html: ' ',
flex: 1.25
}, {
html: '<div style="text-align:left;padding : 20px 0px 0px 20px;color:#120963;">◼ Right Eye</div>',
flex: 1
}, {
html: '<div style="text-align:left;padding : 20px 0px 0px 20px;color:#ffffff;">◼ Left Eye</div>',
flex: 1
}]
}]
},
{
style: 'background-color: #ffffff;',
flex: 1,
items: [{
xtype: 'container',
flex: 1,
layout: 'hbox',
style: 'margin:20px 20px 10px 20px;border-bottom:1px solid #c7c7c7;',
items: [{
xtype: 'container',
flex: 1.25,
html: ' '
}, {
xtype: 'container',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;margin : 20px 20px 0px 20px;color:#120963;"><b>Right Eye</b></div>'
}, {
xtype: 'container',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;margin : 20px 20px 0px 20px;color:#120963;"><b>Left Eye</b></div>'
}]
}, {
xtype: 'container',
flex: 1,
layout: 'hbox',
style: 'margin:0px 20px 0px 10px;border-bottom:1px solid #c7c7c7;',
items: [{
xtype: 'container',
layout: 'hbox',
flex: 1.3,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">APR 4,2014</div>'
}, {
xtype: 'container',
layout: 'hbox',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">10mmHG</div>'
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">12mmHG</div>'
}]
},
{
xtype: 'container',
flex: 1,
layout: 'hbox',
style: 'margin:0px 20px 0px 10px;border-bottom:1px solid #c7c7c7;',
items: [{
xtype: 'container',
layout: 'hbox',
flex: 1.3,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">APR 4,2014</div>'
}, {
xtype: 'container',
layout: 'hbox',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">10mmHG</div>'
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">12mmHG</div>'
}]
},
{
xtype: 'container',
flex: 1,
layout: 'hbox',
style: 'margin:0px 20px 0px 10px;border-bottom:1px solid #c7c7c7;',
items: [{
xtype: 'container',
layout: 'hbox',
flex: 1.3,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">APR 4,2014</div>'
}, {
xtype: 'container',
layout: 'hbox',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">10mmHG</div>'
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">12mmHG</div>'
}]
}]
}
]
}]
}
});
这是我的模特：
Ext.define('denovoeye.model.OcularPressure', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'auto'},
{name: 'g1', type: 'int'},
{name: 'g2', type: 'int'},
{name: 'g3', type: 'int'},
{name: 'g4', type: 'int'},
{name: 'g5', type: 'int'}
]
}
});
这是我的商店：
Ext.define('denovoeye.store.OcularPressure', {
extend: 'Ext.data.Store',
config: {
model: 'denovoeye.model.OcularPressure',
data: [
{"name": "Item-0", "g1": 18.341524994680185, "g2": 0.04297258032918805, "g3": 22.351114037029276, "g4": 10.501821959142115, "g5": 18.422488416954124},
{"name": "Item-2", "g1": 1.9082894708999651, "g2": 5.729225849931112, "g3": 14.809082259901247, "g4": 38.935629377514275, "g5": 2.7729804343737},
{"name": "Item-3", "g1": 21.372004559042896, "g2": 2.131323680889345, "g3": 12.98075950737056, "g4": 63.8279558143009, "g5": 18.852890370148263},
{"name": "Item-4", "g1": 2.678644589238747, "g2": 8.533478458163483, "g3": 4.442247207672851, "g4": 87.39642008886551, "g5": 27.236700916073737},
]
}
});
最后出现此错误：
Uncaught TypeError: Cannot call method 'getData' of null
有人可以看看这个并帮我渲染图表吗？
答案 0 :(得分：0)
这只是一个错字： -
将商店名称从"OcularPressure"更改为"OcularPressures"，并在视图中将其替换。还可以通过添加视图中所需的所有必需文件来删除警告。
答案 1 :(得分：0)
我找到了解决方案。 我需要添加的是图表的高度和宽度。
width:400px;
height:400px;
xtype: 'chart',
store: 'OcularPressure',
flex: 5,
layout: 'fit',
animate: false,
interactions: ['panzoom']