[英]Sencha Charts using Store data - Sencha touch
Here I have the following JSON data , using this I have to create the Chart View. 在这里,我有以下JSON数据,必须使用它来创建Chart View。
Ext.data.JsonP.callback12({"totalCount":0,"success":true,"message":"Successfully retrieved data for report #1",
"content": {
"fields":["name","2014","2013","2012"],
"data":[{"name":"1","2012":208.95,"2013":229.92,"2014":0},
{"name":"2","2013":265.92,"2014":0,"2012":0},
{"name":"3","2012":227.98,"2013":558.13,"2014":0},
{"name":"4","2012":390,"2013":282.09,"2014":0},
{"name":"5","2013":461.1},
{"name":"6","2012":396.8,"2013":427.2,"2014":0},
{"name":"7","2012":305.48,"2013":110.76,"2014":0},
{"name":"8","2012":379.35,"2013":428.46,"2014":0},
{"name":"9","2012":206.5,"2013":535.35,"2014":0},
{"name":"10","2012":376,"2013":168.51,"2014":0},
{"name":"11","2012":275.28,"2013":231.93,"2014":0},
{"name":"12","2012":195.75,"2013":340.94,"2014":0}]}})
With the above JSON I am trying draw a chart, now the problem is,the chart works fine if I give rootProperty: 'content.data' in my store and add static fields (fields : [2014,2013,2012]) in my view. 使用上面的JSON,我正在尝试绘制图表,现在的问题是,如果我在商店中提供rootProperty:'content.data'并在我的商店中添加静态字段(字段:[2014,2013,2012]),则图表可以正常工作视图。 But I want my fields to be added dynamically from the store giving rootProperty: 'content', so that I can use both fields and data in charts(axes and series). 但是我希望从商店中动态添加字段,并赋予rootProperty:'content',以便可以在图表(轴和系列)中同时使用字段和数据。 I am adding my Chart View.Please help on how to add the above fields and data to my chart. 我正在添加图表视图。请帮助如何将以上字段和数据添加到图表中。
View 视图
Ext.define('Sample.view.ChartsView', {
extend: 'Ext.Panel',
xtype: 'myreportsview',
requires: ['Ext.chart.axis.Numeric', 'Ext.data.JsonStore', 'Ext.chart.CartesianChart'],
config: {
title: 'Reports',
iconCls: 'icon-stats',
layout: 'fit',
fullscreen: true,
items: [
{
xtype: 'chart',
style: 'background:#fff',
store: 'YearlyReports',
animate: true,
theme: 'category1',
legend: {
position: 'bottom'
},
axes: [
{
type: 'numeric',
position: 'left',
fields: ['2012', '2013', '2014'], -- these fields should be added from store
title: 'Purchases',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
}
},
style: {
axisLine: false,
estStepSize: 20,
stroke: '#ddd',
'stroke-width': 0.5
},
},
{
type: 'category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year',
style: {
estStepSize: 1,
stroke: '#999'
}
}
],
series: [
{
type: 'line',
xField: 'name',
yField: '2012',
highlightCfg: {
scale: 7
},
axis: 'left',
style: {
smooth: true,
stroke: '#94ae0a',
lineWidth: 3,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3
},
marker: {
type: 'circle',
stroke: '#94ae0a',
fill: '#94ae0a',
lineWidth: 2,
radius: 4,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3,
fx: {
duration: 300
}
}
},
{
type: 'line',
smooth: true,
xField: 'name',
yField: '2013',
highlightCfg: {
scale: 7
},
axis: 'left',
style: {
stroke: '#a61120',
lineWidth: 3,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3
},
marker: {
type: 'circle',
stroke: '#a61120',
fill: '#a61120',
lineWidth: 2,
radius: 4,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3,
fx: {
duration: 300
}
}
},
{
type: 'line',
smooth: true,
xField: 'name',
yField: '2014',
highlightCfg: {
scale: 7
},
axis: 'left',
style: {
fill: "#115fa6",
stroke: "#115fa6",
fillOpacity: 0.6,
miterLimit: 3,
lineCap: 'miter',
lineWidth: 2
},
marker: {
type: 'circle',
stroke: '#0d1f96',
fill: '#115fa6',
lineWidth: 2,
radius: 4,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3,
}
}
]
}
]
}
});
This might be useful to those who want to add chart dynamically. 这对于想要动态添加图表的人可能有用。 created store ('YearlyReports') with above data. 使用上述数据创建了商店(“ YearlyReports”)。
chart in panel 面板中的图表
{
xtype: 'chart',
id: 'yearlyChart',
style: 'background:#fff',
store: {},
animate: true,
theme: 'category1',
legend: {
position: 'bottom'
}
wrote following painted function in config-listeners 在配置侦听器中写了以下绘制的函数
listeners: {
painted: function() {
var store = Ext.getStore('YearlyReports').getAt(0).data,
chart = Ext.getCmp('yearlyChart'),
seriesArray = new Array(),
axesArray = new Array(),
fields = new Array(),
lineColors = ['#115fa6','#94ae0a','#a61120'],
markerColors = ['#94ae0a', '#a61120', '#115fa6'];
for(var j=1;j<store.fields.length;j++) {
fields.push(store.fields[j]);
seriesArray.push(
new Ext.chart.series.Line({
type: 'line',
yField: [store.fields[j]],
xField: 'name',
stacked: false,
style: {
smooth: true,
stroke: lineColors[j-1],
lineWidth: 3,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3
},
marker: {
type: 'circle',
stroke: markerColors[j-1],
fill: markerColors[j-1],
lineWidth: 2,
radius: 4,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3,
fx: {
duration: 300
}
}
}));
}
axesArray.push(
new Ext.chart.axis.Numeric({
type: 'numeric',
position: 'left',
fields: fields,
title: 'Purchases',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
}
},
style: {
axisLine: false,
estStepSize: 20,
stroke: '#ddd',
'stroke-width': 0.5
},
})
);
axesArray.push(
new Ext.chart.axis.Category({
type: 'category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year',
style: {
estStepSize: 1,
stroke: '#999'
}
})
);
var data = {"data" : store.data};
chart.setStore(data);
chart.setAxes(axesArray);
chart.setSeries(seriesArray);
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.