Extjs4.0 Chart 속성 중국어 설명

3830 단어
1. Ext.onReady(function () {  
2.     var win = Ext.create('Ext.Window', {  
3.         width: 800,  
4.         height: 600,  
5.         hidden: false,  
6.         maximizable: true,  
7.         title: ' ',  
8.         renderTo: Ext.getBody(),  
9.         layout: 'fit',  
10.         tbar: [{  
11.             text: 'Reload Data',  
12.             handler: function() {  
13.                 store1.loadData(generateData());  
14.             }  
15.         }],  
16.         items: {  
17.             id: 'chartCmp',  
18.             xtype: 'chart',  
19.             style: 'background:#000',  
20.             animate: true,  
21.             shadow: true,  
22.             store: store1,  
23.             axes: [{  
24.                 type: 'Numeric',  
25.                 position: 'left',  
26.                 fields: ['data1'],  
27.                 label: {  
28.                     renderer: Ext.util.Format.numberRenderer('0,0')  
29.                 },  
30.                 title: 'Number',  
31.                 grid: true,  
32.                 minimum: 0  
33.             }, {  
34.                 type: 'Category',  
35.                 position: 'bottom',  
36.                 fields: ['name'],  
37.                 title: 'Month'  
38.             }],  
39.             series: [{  
40.                 type: 'column',  
41.                 axis: 'left',  
42.                 highlight: true,  
43.                 tips: {  
44.                   trackMouse: true,  
45.                   width: 140,  
46.                   height: 28,  
47.                   renderer: function(storeItem, item) {  
48.                     this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + '$' );  
49.                   }  
50.                 },  
51.                 label: {  
52.                   display: 'insideEnd',  
53.                   'text-anchor': 'middle',  
54.                     field: 'data1',  
55.                     renderer: Ext.util.Format.numberRenderer('0'),  
56.                     orientation: 'vertical',  
57.                     color: '#333'  
58.                 },  
59.                 xField: 'name',  
60.                 yField: 'data1'  
61.             }]  
62.         }  
63.     });  
64. });

axes: 좌표를 설정하는 데 사용됩니다. 여러 개의 좌표를 설정할 수 있습니다.
type: 좌표 유형을 설정합니다.일반적으로 Numeric, Category를 사용합니다.
position: 좌표의 위치를 설정합니다. 예를 들어 상하좌우
fields: 좌표에 표시된 값을 설정하기 위해 여러 필드를 설정할 수 있습니다.사실 이 설정은 시리즈의 yFiled 설정 항목과 관계가 없습니다.
label: 문자의 표시 방식을 설정할 수 있습니다.기본 표시 필드의 값입니다.예를 들어 label을 설정하여 일정한 도수를 회전시킨다
              label: {                    rotate: {                        degrees: 315                    }                }
title: 좌표 설정에 표시할 title
grid: 격자 스타일을 설정합니다.예를 들어 격자의 투명도, 스타일 등을 설정한다.
grid: {//격자 색상 값 설정odd: {opacity: 1, fill:'#ddd', stroke:'#bbb','stroke-width': 1}                }
minimum: 좌표의 최소값을 설정할 수 있습니다.당연히 대응하는 최대치가 있을 것이다.majorTickSteps(주 눈금, 설정은 모두 몇 개의 눈금), minorTickSteps(차 눈금, 각 주에서 짧은 눈금을 그릴 수 있습니다. 예를 들어 10을 설정하면 숫자가 10이 증가하지 않고 세션이 한 번 눈금)
series: 차트 구성
type: 그래프의 종류를 설정합니다. 그래프는 여러 종류가 있습니다.각 차트에는 고유한 구성 항목이 있습니다.
axis: 어느 좌표에 비해.좌표가 여러 개, 도표의 높이, 총 참조가 있기 때문이다.
highlight: 마우스가 도표 위로 이동하고 밝은지 설정합니다.하지만 이 반응은 매우 느리다.
tips: 마우스가 도표로 이동할 때의 알림 정보 설정
label: 도표에 표시된 문자를 설정합니다.문자의 위치, 스타일을 설정할 수 있습니다.그러나 모든 도표에 이 설정 항목이 있는 것은 아니다.
xField: x 좌표가 연결된 필드를 설정합니다.axes가 좌표의 값을 설정했기 때문에 이 필드에 연결된 값은 axes의 좌표 값에 있어야 합니다.
yField: y 좌표가 연결된 필드를 설정합니다.

좋은 웹페이지 즐겨찾기