Здесь у меня есть следующие данные JSON, используя это, мне нужно создать Chart View.Sencha Charts using Хранить данные - Sencha touch
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}]}})
С выше JSON Я пытаюсь нарисовать диаграмму, теперь проблема, диаграмма работает отлично, если я дам rootProperty: «content.data» в моем магазине и добавить статические поля (поля: [2014, 2013,2012]), на мой взгляд. Но я хочу, чтобы мои поля добавлялись динамически из хранилища, давая rootProperty: «content», чтобы я мог использовать оба поля и данные в диаграммах (осях и сериях). Я добавляю свою диаграмму View.Please помощь о том, как добавить вышеуказанные поля и данные в мою диаграмму.
Посмотреть
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,
}
}
]
}
]
}
});