[英]pie-chart not drawing using external json file - extjs
in the below code i was trying to draw a pie-chart using extjs
, but pie-chart is not displaying............. 在下面的代码中,我试图使用extjs
绘制一个饼图,但该饼图未显示.............
when i does pass the json through ajax, inline its working, but when i passed through a file its not working 当我通过Ajax传递json时,内联其工作,但是当我通过文件传递时不起作用
can anyone please tell me some solution for this 谁能告诉我一些解决方案
myjson.json myjson.json
{"graphobject":[{"name":"ABC","data":2},
{"name":"DEF","data":12},
{"name":"GHI","data":3},
{"name":"JKL","data":3}]
}
app.js app.js
Ext.onReady(function() {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ {
name: 'name',
type: 'string'
}, {
name: 'data',
type: 'int'
}]
});
var store= Ext.create('Ext.data.Store', {
storeId: 'user',
model: 'User',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'C:/myjson.json',
reader: {
type: 'json',
root: 'graphobject'
}
}
});
Ext.create('Ext.chart.Chart', {
renderTo: 'myExample',
width: 450,
height: 320,
legend: {
position: 'right'
},
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
var total = 0;
store.each(function(rec) {
total += rec.get('data');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
});
index.html index.html
:
<div id="myExample"></div>
:
hello here is working pie chart in extjs. 您好,这是extjs中的工作饼图。 Try it : 试试吧 :
{
xtype:'portal',
margins:'35 5 5 5',
items:[{
columnWidth:1,
style:'padding:10px 0 10px 10px;',
items:[{
title: 'Events Graph',
tools: tools,
height:350,
id:"eventGraph",
items :[{
store: pieEventGgaph(),
xtype: 'piechart',
id:'pieEventChart',
dataField: 'count',
categoryField: 'event',
series: [{
style: {
colors: ["#FC870A","#03AFFF","#99E329","#DD36EC","#9F0CBB","#CCA105","#FC870A","#03AFFF","#D91FF2", "#29E291"]
}
}],
listeners: {
beforerefresh: function(chart) {
return Ext.isDefined(chart.swf.setDataProvider);
}
},
// extra styles get applied to the chart defaults
extraStyle:
{
legend:
{
display: 'bottom',
padding: 5,
font:
{
family: 'Tahoma',
size: 15
}
}
}}]
}]
}]
}
here is store code: 这是商店代码:
function pieEventGgaph(){
var pieEventGgaph = new Ext.data.Store({
autoLoad:true,
proxy: new Ext.data.HttpProxy({
url: '../xxxx/xxxxx',
timeout :requestTimeOut
}),
reader: new Ext.data.JsonReader({
results: 'event',
root: 'items',
id: 'id'
},
[
{
name: 'count'
},
{
name: 'event'
}
]
),
listeners: {
beforeload: function(store, operation, options){
// before load
},
load: function () {
// after load
}
}
});
return pieEventGgaph;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.