初次接触extjs，写不来，求帮助简单来说，我要做一个图表，看了点示例，但是现在想要把数据写在json文件里调用，不知道该怎么写
Ext.onReady(function(){
var dataStore = new Ext.data.JsonStore({
fields:['name', 'percentage'],
data: [
{name :'小于30岁', percentage : 2},
{name :'30-40岁', percentage : 4},
{name :'40-50岁', percentage : 3},
{name :'50岁以上', percentage : 3}
]
});
Ext.create('Ext.panel.Panel', {
title : '员工年龄分布图',
width: 400,
height: 400,
renderTo: Ext.getBody(),
layout: 'fit',
items : [{
xtype : 'chart',
store : dataStore,
axes: [{……………………
});
});这是某个示例，求改Ext JS
Ext.onReady(function(){
var dataStore = new Ext.data.JsonStore({
fields:['name', 'percentage'],
data: [
{name :'小于30岁', percentage : 2},
{name :'30-40岁', percentage : 4},
{name :'40-50岁', percentage : 3},
{name :'50岁以上', percentage : 3}
]
});
Ext.create('Ext.panel.Panel', {
title : '员工年龄分布图',
width: 400,
height: 400,
renderTo: Ext.getBody(),
layout: 'fit',
items : [{
xtype : 'chart',
store : dataStore,
axes: [{……………………
});
});这是某个示例，求改Ext JS
var dataStore = new Ext.data.JsonStore({
fields:['name', 'percentage'],
url:'xxx.json',
totalProperty : "total",
root: 'root'
});xxx.json文件:{"total":4,"root":[
{name :'小于30岁', percentage : 2},
{name :'30-40岁', percentage : 4},
{name :'40-50岁', percentage : 3},
{name :'50岁以上', percentage : 3}
]}
要么 json文件路径没有写对
要么…………store木有load在里面加一个：autoLoad : true
<HEAD>
<TITLE>图表示例：坐标轴</TITLE>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.0/locale/ext-lang-zh_CN.js"></script>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
Ext.onReady(function () {
// var dataStore = new Ext.data.JsonStore({
// fields: ['name', 'percentage'],
// data: [
// { name: '小于30岁', percentage: 2 },
// { name: '30-40岁', percentage: 4 },
// { name: '40-50岁', percentage: 3 },
// { name: '50岁以上', percentage: 3 }
// ]
// });
var dataStore = new Ext.data.JsonStore({
fields: ['name', 'percentage'],
url: 'test.json',
totalProperty: "total",
root: 'root',
autoLoad: true
});
Ext.create('Ext.panel.Panel', {
title : '员工年龄分布图',
width: 400,
height: 400,
renderTo: Ext.getBody(),
layout: 'fit',
items : [{
xtype : 'chart',
store : dataStore,
axes: [{
type: 'Numeric',//配置坐标轴类型为数值坐标
dashSize : 10,//坐标轴前导线条长度，默认为3
position: 'left',//配置坐标在左侧
fields: ['percentage'],//指定坐标对应的字段
title: '百分比',//配置坐标轴标题
grid: {
//奇数行
odd : {
opacity: 1,//不透明
fill: '#FFFF99',//表格内的填充色
stroke: '#FF3300',//表格线颜色
'stroke-width': 0.5//表格线宽度
},
//偶数行
even : {
opacity: 0,//透明
stroke: '#6600CC',//表格线颜色
'stroke-width': 0.5//表格线宽度
}
},
majorTickSteps : 10,//主区间数
minorTickSteps : 3//副区间数
}, {
type: 'Category',//配置坐标轴类型为目录坐标
position: 'bottom',//配置坐标在底部
fields: ['name'],//指定坐标对应的字段
grid : true,//启用表格
title: '年龄段'//配置坐标轴标题
}],
series : [{
type: 'line',
axis: 'left',
xField: 'name',//横轴字段
yField: 'percentage'//纵轴字段
}]
}]
});
});
</SCRIPT>
<BODY STYLE="margin: 10px"></BODY>
</HTML>
这是我根据你说的改的示例，你看看哪里有问题，纠结死我了