JSON檔案
Line chart綁定store
拖入一個Line chart并綁定store（設定好url和fileds） sencha architect自動生成的代碼： store：
Ext.define('MyApp10.store.data2', {
extend: 'Ext.data.Store',
requires: [
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json',
'Ext.data.Field'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
storeId: 'data2',
proxy: {
type: 'ajax',
url: 'data/chart/data2.json',
reader: {
type: 'json'
}
},
fields: [
{
name: 'name'
},
{
name: 'data1'
},
{
name: 'data2'
},
{
name: 'data3'
}
]
}, cfg)]);
}
});
設定屬性
line chart屬性：
添加一個legend和三個series：
axes屬性：
Category fields：name title：名稱 Numeric fields：data1，data2，data3， title：資料 編輯grid屬性：
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
},
series屬性：
直接貼代碼了：
series: [
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
xField: 'name',
yField: 'data1',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
},
smooth: 3
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
xField: 'name',
yField: 'data2',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
smooth: 3
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
xField: 'name',
yField: 'data3',
fill: true,
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
smooth: 3
}
],
全部代碼
{
xtype: 'panel',
id: 'linechart_tab',
title: 'LineChart',
items: [
{
xtype: 'chart',
height: 477,
id: 'linechart',
width: 789,
animate: true,
insetPadding: 20,
store: 'data2',
theme: 'Category1',
axes: [
{
type: 'Category',
fields: [
'name'
],
title: '名稱',
position: 'bottom'
},
{
type: 'Numeric',
fields: [
'data1',
'data2',
'data3'
],
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
},
title: '資料',
position: 'left'
}
],
series: [
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
xField: 'name',
yField: 'data1',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
},
smooth: 3
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
xField: 'name',
yField: 'data2',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
smooth: 3
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
xField: 'name',
yField: 'data3',
fill: true,
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
smooth: 3
}
],
legend: {
position: 'right'
}
}
]
},
預覽效果