Extjs ColumnChart는 다양한 색상 구현 code_extjs를 설정합니다

코드 복사 코드는 다음과 같습니다.

ext.onready (function () { // 스토어 정의 root : 'root', 필드 : [ <: :> {이름 : 'ne', type : 'string'}, // 네트워크 요소 {이름 : 'spine', type : 'int'}, // threshold ], sortInfo : {필드 : 'Bill', Direction : 'asc'} }); 🎜> var obj = { 루트 : [
{ne : '네트워크 요소 1', 제한 : 80, 빌 : 150},
{ne : '네트워크 요소 2', 제한 : 150, Bill : 140}, {ne : '네트워크 요소 3', 제한 : 180, 빌 : 160}, { NE : '네트워크 요소 6', 제한 : 165, 빌 : 13}, ]
} //로드 데이터
ChartStore.loadData (OBJ); Alert ( "data1"); ChartStore.loadData (OBJ); var spine = record.data [ 'confine']; if (value & gt; = confine) {
// cellmeta.css = 'x-grid-back-red'; row = cm.findcolumnindex (rowindex); '임계 값', dataindex : 'confine'} ]); ({ 제목 : '작업 주문 백 로그 모니터링 통계', cm : cm, 스토어 : Chartstore,
sm : new ext.grid.rowSelectionModel ({ SingleSelect : true
}), 스트리퍼 로우 : true,
로드 마스크 : true, clickstoedit : 2, // Double-Click Trigger, trackmover : false, Striperows : true,
프레임 : true, 로드 마스크 : { msg : "데이터 로딩 ..." viewconfig : { forcefit : true,
columnstext : 'display columns', scrolloffset : 25, sortdesctext : 'descending'}, bbar : new ext.pagingToolbar ({ pagesize : 24, Store : Chartstore, displaymsg : 'display records {0} to {1}, 총 {2} 항목',
emptymsg : '레코드 없음' viewconfig : {forcefit : true, sortasctext : 'forward order', sortdesctext : '내림차순 순서', if (record.data.bill & gt; = record.data.confine) {
retain 'x-grid-back-red'}; Resources/Charts.swf ', Store : Chartstore, // 팁 내용을 정의 tiprenderer : function (Chart, record.get ( 'starttime'); 요소 : {0} n 작업 오더 수량 : {1} n 임계 값 : {2} ', ne, record.get ('bill '), record.get ('confine '))
return str; }, // 두 차트 정의, 하나는 막대 차트이고 다른 하나는 줄 차트
시리즈입니다. id : "billid", yfield : 'bill', 스타일 : { 색상 : 0x99bbe8, size : 20
} }, { type : 'column', 스타일 : {
색상 : '#ff0000', size : 20 }], 리스너 : { "show": function () { ChartStyle : { 범례 : { 디스플레이 : "TOP"}, 색상 : 0x69ABC8,
Majorticks : {Color : 0x69abc8, 길이 : 4}, 미네르틱 : {색상 : 0x69abc8, 길이 : 2}, majorgridlines : {size : 1, color : 0xeeeee}
},
yaxis : { 색상 : 0x69ABC8,
Majorticks : {색상 : 0x69ABC8, 길이 : 4}, 미니 모르 틱스 : {색상 : 0x69ABC8, 길이 : 2},
MajorGridLines : {size : 1, color : 0xdfe8f6}
}
} }); 영역 : enabletabscroll : true, closable : false, split : false,
붕괴 : false, layoutOntabchange : true,
항목 : [Linechart, Grid] }); interval = new ext.form.textfield ({
name : 'interval', fieldlabel : }); 🎜> var grouptype = new ext.form.radiogroup ({ 이름 : 'grouptype', FieldLabel : '그룹화 메소드', id : "SearchGrouptype",
항목 : [ new ext.form.radio ({ name : "grouptype", inputvalue : "1", boxlabel : "region" new ext .form.radio ( { 이름 : "grouptype", inputValue : "2", boxlabel : "지역 네트워크 요소" new ext.form.radio ({ name : "grouptype", inputValue : "3", boxlabel : "지역 네트워크 요소 서비스 코드"}) ] // 🎜 var startbtn = new ext.button ({ 텍스트 : '开始', minwidth : 80,
handler : function () { // Store .load (); // 🎜 var stopbtn = new ext.button ({ 텍스트 : '停止', minwidth : 80,
handler : function () { // Store .load (); var searchPanel = new ext.form.formpanel ({ labelalign : 'left', 프레임 : true,
레이아웃 : '열',
항목 : [ {columnWidth : .28, 레이아웃 : 'form', 항목 : [interval]}, { ColumnWidth : .10, 레이아웃 : 'form', 항목 : [startBtn]}, ]
}); var vp = new ext.viewport ({ 레이아웃 : '국경', 테두리 : 거짓, 숨기기 : true,
bufferresize : 100,
항목 : [
// {region : 'North', 제목 : ':: 监控条件', AutoHeight : True, margins : '5 5 10 5', Collapsible : True, 항목 : [SearchPanel]}, ] }); vp.show ();
});