ExtJS6图表简单demo(折线图，散点图，柱状图)
首先需要引入这三个文件，都懂
<link rel="stylesheet" type="text/css" href="build/classic/theme-triton/resources/theme-triton-all.css" />
<script type="text/javascript" src="build/ext-all.js">
</script>
<script type="text/javascript" src="build/packages/charts/classic/charts.js">
官方demo（把线宽度调0就是散点图了吧）
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('KitchenSink.view.charts.line.Basic', {
renderTo: Ext.getBody()
});
});
Ext.define('KitchenSink.view.charts.line.Basic', {
extend: 'Ext.Panel',
xtype: 'line-basic',
controller: 'line-basic',
width: ,
items: {
xtype: 'cartesian',
reference: 'chart',
width: '100%',
height: ,
interactions: {
type: 'panzoom',
zoomOnPanGesture: true
},
store: {
type: 'browsers'
},
insetPadding: ,
innerPadding: {
left: ,
right:
},
sprites: [{
type: 'text',
text: '邰志敏上标',
fontSize: ,
width: ,
height: ,
x: , // the sprite x position
y: // the sprite y position
}, {
type: 'text',
text: '邰志敏水印',
fontSize: ,
x: ,
y:
}, {
type: 'text',
text: '邰志敏数据支持',
fontSize: ,
x: ,
y:
}],
axes: [{
type: 'numeric',
position: 'left',
grid: true,
minimum: ,
maximum: , //这里设置百分比
renderer: 'onAxisLabelRender'
}, {
type: 'category',
position: 'bottom',
grid: true,
label: {
rotate: {
degrees: -
}
}
}],
series: [{
type: 'line',
xField: 'month',
yField: 'data1',
style: {
lineWidth: //线的宽度
},
marker: {
radius: //散点的radius
},
label: {
field: 'data1',
display: 'over'
},
highlight: {
fillStyle: '#000',
radius: ,
lineWidth: ,
strokeStyle: '#fff'
},
tooltip: {
trackMouse: true,
showDelay: ,
dismissDelay: ,
hideDelay: ,
renderer: 'onSeriesTooltipRender'
}
}]
},
tbar: ['->', {
text: '预览',
handler: 'onPreview'
}]
});
Ext.define('KitchenSink.view.charts.line.BasicController', {
extend: 'Ext.app.ViewController',
alias: 'controller.line-basic',
onAxisLabelRender: function(axis, label, layoutContext) {
// Custom renderer overrides the native axis label renderer.
// Since we don't want to do anything fancy with the value
// ourselves except appending a '%' sign, but at the same time
// don't want to loose the formatting done by the native renderer,
// we let the native renderer process the value first.
return layoutContext.renderer(label) + '%';
},
onSeriesTooltipRender: function(tooltip, record, item) {
tooltip.setHtml(record.get('month') + ': ' + record.get('data1') + '%');
},
onPreview: function() {
var chart = this.lookupReference('chart');
chart.preview();
}
});
Ext.define('KitchenSink.store.Browsers', {
extend: 'Ext.data.Store',
alias: 'store.browsers',
// IE Firefox Chrome Safari
fields: ['month', 'data1', 'data2', 'data3', 'data4', 'other'],
constructor: function(config) {
config = config || {};
config.data = [{
month: '一月',
data1: ,
data2: ,
data3: ,
data4: ,
other:
}, {
month: '二月',
data1: ,
data2: ,
data3: ,
data4: ,
other:
}, {
month: '三月',
data1: ,
data2: ,
data3: ,
data4: ,
other:
}, {
month: '四月',
data1: ,
data2: ,
data3: ,
data4: ,
other:
}, {
month: '五月',
data1: ,
data2: ,
data3: ,
data4: ,
other:
}, {
month: '六月',
data1: ,
data2: ,
data3: ,
data4: ,
other:
}, {
month: '七月',
data1: ,
data2: ,
data3: ,
data4: ,
other:
}, {
month: '八月',
data1: ,
data2: ,
data3: ,
data4: ,
other:
}, {
month: '九月',
data1: ,
data2: ,
data3: ,
data4: ,
other:
}, {
month: '十月',
data1: ,
data2: ,
data3: ,
data4: ,
other:
}, {
month: '十一月',
data1: ,
data2: ,
data3: ,
data4: ,
other:
}, {
month: '十二月',
data1: ,
data2: ,
data3: ,
data4: ,
other:
}];
this.callParent([config]);
}
});
</script>
-柱状图
<script type="text/javascript">
Ext.onReady(function() {
Ext.define('WeatherPoint', {
extend: 'Ext.data.Model',
fields: ['temperature', 'date']
});
var store = new Ext.data.JsonStore({
fields: ['name', 'visits', 'views'],
data: [{
name: '日本',
visits: ,
views:
}, {
name: '韩国',
visits: ,
views:
}, {
name: '泰国',
visits: ,
views:
}, {
name: '伊朗',
visits: ,
views:
}, {
name: '法国',
visits: ,
views:
}, {
name: '德国',
visits: ,
views:
}, {
name: '中国',
visits: ,
views:
}]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: ,
height: ,
store: store,
//
axes: [{
type: 'numeric',
position: 'left',
title: 'DGP总量',
grid: {
odd: {
opacity: ,
fill: '#ddd',
stroke: '#bbb',
lineWidth:
}
},
minimum:
}, {
type: 'category',
position: 'bottom',
label: {
rotate: {
degrees:
}
}
}],
//series负责画线
//叠加显示
/*series: [{
type: 'bar',
xField: 'name',
yField: ['visits', 'views']
}],*/
//单独显示
series: {
type: 'bar',
stacked: false,
title: ['Previous Year', 'Current Year'],
xField: 'name',
yField: ['visits', 'views'],
label: {
field: ['visits', 'views'],
display: 'insideEnd',
renderer: 'onSeriesLabelRender'
},
highlight: true,
style: {
//柱子间距离
inGroupGapWidth:
}
}
//theme: 'Green',
});
});
</script>
折线图
<script type="text/javascript">
Ext.onReady(function() {
Ext.define('WeatherPoint', {
extend: 'Ext.data.Model',
fields: ['temperature', 'date']
});
var store = Ext.create('Ext.data.Store', {
model: 'WeatherPoint',
data: [{
temperature: ,
date: new Date(, , , )
}, {
temperature: ,
date: new Date(, , , )
}, {
temperature: ,
date: new Date(, , , )
}, {
temperature: ,
date: new Date(, , , )
}, {
temperature: ,
date: new Date(, , , )
}]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: ,
height: ,
store: store,
//
axes: [{
title: 'Temperature',
type: 'numeric',
position: 'left',
fields: ['temperature'],
minimum: ,
maximum:
}, {
title: 'Time',
type: 'time',
position: 'bottom',
fields: ['date'],
groupBy: 'hour',
dateFormat: 'ga'
}],
//series负责画线
series: [{
type: 'line',
xField: 'date',
yField: 'temperature'
}],
theme: 'Green',
});
});
</script>