페이지 트리

버전 비교

  • 이 줄이 추가되었습니다.
  • 이 줄이 삭제되었습니다.
  • 서식이 변경되었습니다.

page no.   

Showpageid

Start Release No : 7.0.400.20230209 / Update Release No :

프로젝트명 : (BCRM#D4258) Slider 차트 문의

 7.0.500.20240329-01

작성자 : 

   

김예슬       / 검수자 :  이경륜

펼치기
첨부 파일


  1. 기능
정보
  •  API Open
  •  UI Open
  •  Read Only
  •  Not Use
  •  Hidden
  •  Not Recommend
도움말
iconfalse
title기능 설명

개요

Slider 컨트롤의 스타일을 변경할 수 있는 API가 추가되었습니다.

Slider 구조

■ Bar

Image Removed

■ Line

Image Removed

■ Handle

Image Removed

■ FromToDataLabel

Image Removed

■ ActiveDataLabel

Image Removed

■ Grid

Image Removed

API 구조

  1. 설명
    1. Slider 컨트롤의 스타일을 변경할 수 있는 API가 추가되었습니다.

  2. 사용 방법
    1. 신규 추가된 Script API를 이용하여 Slider 컨트롤의 스타일을 변경할 수 있습니다.

      코드 블럭
      languagejs
      themeEclipse
      firstline1
      title예제 코드
      linenumberstrue
      var Slider = null; 
      
      var initControlVariables = function(){
      	Slider = Matrix.getObject("Slider"); 
      	setSliderGreen();
      };
      initControlVariables();
      
      function setSliderGreen(){
      	var green = {
      		bar: '#82d173',
      		line: '#dbf4a7',
      		handle: '#b6e94c',
      		hadleHover: '#91ba3c',
      		fromtoBgColor: '#416839',
      		activeBgColor: '#51ba3d',
      		text: 'white',
      		grid: '#c273d1'
      	};
      	// Slider의 스타일 객체 : Slider.sliderStyle
      	Slider.sliderStyle.BarBackground = green.bar;
      	Slider.sliderStyle.LineBackground = green.line;
      	Slider.sliderStyle.HandleColor = green.handle;
      	Slider.sliderStyle.HoverHandleColor = green.hadleHover;
      	Slider.sliderStyle.FromToDataLabelBackgroundColor = green.fromtoBgColor;
      	Slider.sliderStyle.FromToDataLabelTextColor = green.text;
      	Slider.sliderStyle.ActiveDataLabelBackgroundColor = green.activeBgColor;
      	Slider.sliderStyle.GridColor = green.grid;
      	Slider.sliderStyle.HandleBorderColor = green.activeBgColor;
      	Slider.sliderStyle.GridTextFont = 'Courier';
      }
      


  3. 기능 상세
    1. Slider 구조는 다음과 같습니다.

      1. Bar
        Image Added
      2. Line
        Image Added
      3. Handle
        Image Added
      4. FromToDataLabel
        Image Added
      5. ActiveDataLabel
        Image Added
      6.  Grid
        Image Added

    2. 지원하는 API리스트는 다음과 같습니다.
      • Property

        Property Name

        Data Type설명사용 예시
        BarBackgroundstringBar 배경 색Slider.sliderStyle.BarBackground = '#90dfc0';
        LineBackgroundstringLine 배경 색Slider.sliderStyle. LineBackground= '#90dfc0';
        HandleColorstringHandle 배경 색
Slider
      • SlidersliderStyle..HandleColor= '#90dfc0';
        HandleBorderColorstringHandle의 Border 색Slider.sliderStyle. HandleBorderColor= '#90dfc0';
        HoverHandleColorstringHandle의 마우스 오버 했을 때의 배경 색Slider.sliderStyle. HoverHandleColor= '#90dfc0';
        FromToDataLabelBackgroundColorstringFrom / To Data Label의 배경 색Slider.sliderStyle. FromToDataLabelBackgroundColor= '#90dfc0';
        FromToDataLabelTextColorstringFrom / To Data Label의 폰트 색Slider.sliderStyle.FromToDataLabelTextColor= '#90dfc0';
        FromToDataLabelTextSizestringFrom / To Data Label의 폰트 크기Slider.sliderStyle. FromToDataLabelTextSize= '13px';
        FromToDataLabelTextFontstringFrom / To Data Label의 폰트 종류Slider.sliderStyle.FromToDataLabelTextFont= 'Courier';
        ActiveDataLabelBackgroundColorstringActive Data Label의 배경 색Slider.sliderStyle. ActiveDataLabelBackgroundColor= '#90dfc0';
        ActiveDataLabelTextColorstringActive Data Label의 폰트 색Slider.sliderStyle. ActiveDataLabelTextColor= '#90dfc0';
        ActiveDataLabelTextSizestringActive Data Label의 폰트 크기Slider.sliderStyle. ActiveDataLabelTextSize= '13px';
        ActiveDataLabelTextFontstringActive Data Label의 폰트 종류Slider.sliderStyle. ActiveDataLabelTextFont= 'Courier';
        ShadowColorstringShadow 색Slider.sliderStyle.ShadowColor = ' #90dfc0';
        GridColorstringGrid 색Slider.sliderStyle.GridColor = ' #90dfc0';
        GridTextSizestringGrid 폰트 크기Slider.sliderStyle.GridColor = ' 13px';
        GridTextFontstringGrid 폰트 종류Slider.sliderStyle.GridColor = 'Courier';

      • Method

        Method NameReturns설명사용 예시
        Clear()voidSlider의 스타일을 초기화시킵니다


        코드 블럭
        languagejs
        themeEclipse
        firstline1
        title예제 코드
        linenumberstrue
        collapsetrue
        Button.OnClick = function(s, e){
        	Slider.sliderStyle.Clear();
        }




사용 예제codevar Slider = null; var initControlVariables = function(){ Slider = Matrix.getObject("Slider"); setSliderGreen(); }; initControlVariables(); function setSliderGreen(){ var green = { bar: '#82d173', line: '#dbf4a7', handle: '#b6e94c', hadleHover: '#91ba3c', fromtoBgColor: '#416839', activeBgColor: '#51ba3d', text: 'white', grid: '#c273d1' }; // Slider의 스타일 객체 : Slider.sliderStyle Slider.sliderStyle.BarBackground = green.bar; Slider.sliderStyle.LineBackground = green.line; Slider.sliderStyle.HandleColor = green.handle; Slider.sliderStyle.HoverHandleColor = green.hadleHover; Slider.sliderStyle.FromToDataLabelBackgroundColor = green.fromtoBgColor; Slider.sliderStyle.FromToDataLabelTextColor = green.text; Slider.sliderStyle.ActiveDataLabelBackgroundColor = green.activeBgColor; Slider.sliderStyle.GridColor = green.grid; Slider.sliderStyle.HandleBorderColor = green.activeBgColor; Slider.sliderStyle.GridTextFont = 'Courier'; }
도움말
title
languagejs
themeEclipse
firstline1
title예제 코드
linenumberstrue
참고 사항
  • 자세한 적용 예제는 첨부파일 속 AUD보고서를 확인하여 주세요.


참고사항
title주의 사항
  • 변경 사항

    변경 전변경 후릴리즈 번호

    Image Added 기본 제공 스타일만 이용할 수 있었습니다.

    Image Added 기본 제공 스타일의 커스텀이 가능합니다.

    7.0.400.20230209



기능 정보
  •  API Open
  •  UI Open
  •  Read Only
  •  Not Use
  •  Hidden
  •  Not Recommend
  •  해당 없음
시작 버전 정보
  • Release No : 7.0.400.20230209


변경 전

변경 후

정보
title샘플 정보
  • 샘플 URL :
  • 샘플 파일

첨부 파일
patterns.*jsp,.*zip,.*xml,.*js,.*mtsd,.*xlsx,.*xlsb,.*mtzb,.*mtvx,.*mtx,.*mtxz,

변경 전/후 제품 버전

변경 전(제품 버전)

Image Removed 기본 제공 스타일만 이용 가능

Image Removed 기본 제공 스타일 이외에 커스텀 가능

참고사항
title참고 자료
정보title

.*mtsz


페이지 속성
hiddentrue

View file
name(BCRM D4258) Slider 차트 문의_Sample.mtsz
height250

정보
title
문서 수정 이력
변경 이력

하위 페이지 표시
alltrue

BCRM 정보


(
BCRM접수번호
BCRM#D4258)
제목

...

Slider 차트 문의