0
여기 차트보기를 생성해야하는 다음 JSON 데이터가 있습니다. 내 가게에서 'content.data'정적 필드 (필드 추가 : [2014 년, 내가 rootProperty을 주면Store 데이터를 사용하는 Sencha 차트 - Sencha touch
I 차트를 그릴 노력하고 위의 JSON으로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}]}})
, 지금 문제가 차트가 잘 작동 2013,2012]) 내보기. 그러나 나는 필드를 rootProperty : 'content'를 제공하는 저장소에서 동적으로 추가하여 차트 (축 및 시리즈)에서 필드와 데이터를 모두 사용할 수 있도록하고 싶습니다. 차트보기를 추가하고 있습니다. 위의 필드와 데이터를 차트에 추가하는 방법에 대해 도움을주십시오.
보기
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,
}
}
]
}
]
}
});