从.json文件中获取值后，我无法在extjs中显示图形。
请找到附带的代码。
chart.json
{ "graphobject":
[
{ 'name': 'abc', 'data': 7 },
{ 'name': 'xyz', 'data': 5 },
{ 'name': 'mnop', 'data': 2 },
{ 'name': 'qrst', 'data':27 },
{ 'name': 'cde', 'data':20 }
]
}
abc.js
Ext.require([
'Ext.data.*',
'Ext.chart.*',
'Ext.util.Point'
]);
Ext.onReady(function () {
var tore = new Ext.data.JsonStore({
url: 'chart.json',
autoLoad: false,
root: 'graphobject',
fields: ['name', 'data']
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: tore,
axes: [
{
type: 'Numeric',
position: 'left',
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
title: 'Sample Metrics'
}
],
series: [
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
},
]
});
});
现在我能够获得折线图，但值不合适。
你可以帮我在extjs中获取正确的图表。
提前致谢..
答案 0 :(得分：1)
fields: ['name', 'date']
第二个字段不应该是“数据”而不是“日期”
我认为你的问题是你的JsonDataStore的URL。您应该通过Web服务器获取chart.json而不尝试直接读取它。我希望这篇文章可以帮到你。
答案 1 :(得分：0)
请找到以下代码从JSON文件中获取代码并在EXTJS中显示图形。
/*global Ext:false */
Ext.onReady(function () {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ {
name: 'name',
type: 'string'
}, {
name: 'data',
type: 'int'
}]
});
var user = Ext.create('Ext.data.Store', {
storeId: 'user',
model: 'User',
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'example.json',
//url: 'https://dev26.opendev.dw.demandware.net/on/demandware.servlet/webdav/Sites/Impex/example.json',
reader: {
type: 'json',
root: 'graphobject'
}
}
});
//Bar Chart
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: user,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
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'
}]
});
//Line Chart
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: user,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: [
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
fill: true,
xField: 'name',
yField: 'data',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
});
//pie chart
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 350,
animate: true,
store: user,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
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'
}
}]
});
});