使用 JSON 文件中的 extjs 绘制饼图
drawing piechart using extjs from json file
我已经成功地通过 ajax 调用使用 extjs 和 JSON 值绘制了一个饼图。 但是我无法通过从名为myjson.json的json文件中检索json值来绘制相同的方式,
任何人都可以告诉我如何通过使用以下代码从 JSON 文件 (myjson.json) 中检索 JSON 值来绘制饼图
我的代码如下
Ext.onReady(function() {
var getResources,getResources1;
var flag=0;
Ext.Ajax.request({
dataType : "json",
url: 'getHSEXmatrix.action',
params: {
},
success: function(response){
getResources = Ext.decode(response.responseText);
createChart3(getResources);
}
});
var createChart3 = function(resources) {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: resources
});
Ext.create('Ext.chart.Chart', {
renderTo: 'myExample3',
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'No of actions',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Exclation Matrix'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data'
}]
});
}
});
看看
这些东西 https://stackoverflow.com/questions/10203872/cant-get-json-datastore-into-extjs-sencha-touch-chart-displays-error-cannot
- 在 Web 服务器上运行示例,因为从文件系统加载 JSON 文件有时会导致问题。
按如下方式构建 json 数据
{ "data": [ { "School": "Dukes", "wins": "3" }, { "School": "Emmaus", "wins": "10" }, { "School": "Maryland", "wins": "5" }, { "School": "Virginia", "wins": "2" } ] }
使用以下数据存储
window.store1 = new Ext.data.Store({ model: 'Details', proxy: { type: 'ajax', url: 'GetDataset.json', reader: { root: 'data', type: 'json' } }, autoLoad: true });
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- ExtJS 5用程序点击actioncolumn gridview
- ExtJS——在展开/折叠时调整面板高度
- 有没有一个javascript图形绘制库可以进行气球树布局
- 使用相同的数据集绘制各种符号
- 使用onclick绘制SVG路径
- 在谷歌地图上绘制位置数据库
- 用chart.js绘制条形图
- “可绘制地图”设置地图选项“纬度-经度”
- 这.SOMETHING 总是返回未定义的 - extjs
- ExtJS网格单元格编辑器,防止焦点松动问题
- 多维数据集网格未在指定的分区中绘制
- 使用谷歌图表在x轴上绘制日期
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- Extjs:Ajax,Proxy,使用JSON和JQuery进行图表绘制
- 使用 JSON 文件中的 extjs 绘制饼图
- 在网格单元中绘制组件-extjs 4
- EXTJS:如何根据响应中的a属性在TreeGrid中绘制不同颜色的行
- 当第一个记录为空时,Extjs折线图不绘制系列
- ExtJS绘制包和鼠标事件