extJs自学笔记(3)

2019-03-04 10:45

的值绑定到该轴。如果未设置值,那么其规模将自动调整值。

{ }

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格式化


extJs自学笔记(3).doc 将本文的Word文档下载到电脑 下载失败或者文档不完整,请联系客服人员解决!

下一篇:南三龙铁路指导性施组 - 图文

相关阅读
本类排行
× 注册会员免费下载(下载后可以自由复制和排版)

马上注册会员

注:下载文档有可能“只有目录或者内容不全”等情况,请下载之前注意辨别,如果您已付费且无法下载或内容有问题,请联系我们协助你处理。
微信: QQ: