的值绑定到该轴。如果未设置值,那么其规模将自动调整值。
{ }
type: 'Numeric', position: 'left',
fields: ['data1', 'data2' ,'data3', 'data4', 'data5'], label: {
renderer: Ext.util.Format.numberRenderer('0,0') },
title: 'Sample Values', grid: true, minimum: 0
(2) 时间轴 Ext.chart.axis.Time
单位是时间值的计量的轴。使用这个轴可以列出你想要以组的形式或者动态变化的日期。如果你只是想显示时间类别,你可以使用Category类代替.
axes: [{
title: 'Time', type: 'Time',
position: 'bottom',
fields: ['date'], //坐标轴开始时间
fromDate: new Date(2011, 1, 1, 8), //坐标轴结束时间
toDate: new Date(2011, 1, 1, 12),
//坐标轴间隔,‘h’是Ext.Date.HOUR的值,意义坐标轴间隔为1小时 step: ['h', 1],
//坐标轴标签日期格式化
//参考:http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.Date dateFormat: 'ga' }]
(3) 分类轴Ext.chart.axis.Category
{
type: 'Category', }
position: 'bottom', fields: ['name'], title: 'Sample Metrics'
(4) 仪表轴 Ext.chart.axis.Gauge
{ }
图表的类型series
type: 'gauge', position: 'gauge', minimum: 0,//最小值 maximum: 100,//最大值 steps: 20,//分为100/20格 margin: 10
(1)折线图 Ext.chart.series.Line
{ { }
type: 'line', highlight: { size: 7, radius: 7 }, tips: {
trackMouse: true, width: 140, height: 28,
renderer: function(storeItem, item) { this.setTitle(storeItem.get('name') + ': ' + } },
storeItem.get('data1') + ' views');
axis: 'left', xField: 'name', yField: 'data1', markerConfig: { type: 'cross', size: 4, radius: 4, 'stroke-width': 0 }
(2) 柱形图 Ext.chart.series.Column {
type: 'column', axis: 'bottom',
//是否把不同的field折叠起来 stacked: true, xPadding: 0,
//大组间的距离,bar宽度的百分比 gutter: 10,
//组内的距离,bar宽度的百分比 groupGutter: 0, tips: {
trackMouse: true, width: 140, height: 28,
renderer: function(storeItem, item) {
this.setTitle(item.yField + ': ' + item.value[1] + ' $'); } },
label: {
display: 'insideEnd',
field: ['data1', 'data2', 'data3', 'data4', 'data5'], renderer: Ext.util.Format.numberRenderer('0'), orientation: 'horizontal' //color: '#fff' },
xField: 'name',
yField: ['data1', 'data2', 'data3', 'data4', 'data5'] }
(3) 饼状图 Ext.chart.series.Pie
{
type: 'pie',
angleField: 'data', showInLegend: true, tips: {
trackMouse: true, width: 140, height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) { total += rec.get('data'); });
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%'); } },
highlight: { segment: { margin: 20 } },
label: {
field: 'name', display: 'rotate', contrast: true, font: '18px Arial' } }
(4) 条形图 Ext.chart.series.Bar
(5) 面积图 Ext.chart.series.Area
{
type: 'area', highlight: false, axis: 'left', xField: 'name',
yField: ['data1', 'data2', 'data3', 'data4', 'data5' ],
style: {
opacity: 0.93 } }
(6) 雷达图 Ext.chart.series.Radar {
type: 'radar', xField: 'name',
yField: 'data1',
showInLegend: true, showMarkers: true, markerConfig: { radius: 5, size: 5 },
style: {
'stroke-width': 2, fill: 'none' } }
(7) 散点图 Ext.chart.series.Scatter {
type: 'scatter', markerConfig: { radius: 5, size: 5 },
axis: 'left', xField: 'name', yField: 'data2' }
(8) 仪表图 Ext.chart.series.Gauge {
type: 'gauge',
field: 'value',//被映射的store的属性 highlight: true,
needle: true,//显示指针
donut: 30,//显示仪表盘的面积0-100之间,会从半圆中挖去一部分 colorSet: ['gray', '#DBEAF9']//第一个颜色是仪表盘的颜色 }
常用属性
highlight高亮,label标题,tips提示,renderer格式化