React 툴바 컴포넌트 | Ignite UI for React

React Toolbar 컴포넌트는 차트 컴포넌트와 함께 주로 사용되는 UI 작업을 위한 컴패니언 컨테이너입니다. 도구 모음은 or IgrCategoryChart 구성 요소에 연결 IgrDataChart 될 때 속성 및 도구 항목의 사전 설정으로 동적으로 업데이트됩니다. 최종 사용자가 변경 사항을 제공할 수 있도록 하는 프로젝트에 대한 사용자 지정 도구를 만들어 끝없는 사용자 지정을 제공할 수 있습니다.

Dependencies

Ignite UI for React 레이아웃, 입력, 차트 및 핵심 패키지를 설치합니다.

npm install igniteui-react-layouts
npm install igniteui-react-inputs
npm install igniteui-react-charts
npm install igniteui-react-core

다음 모듈은 구성 요소 및 해당 기능과 함께 IgrDataChart 사용할 IgrToolbar 때 필요합니다.

import { IgxToolbarModule } from 'igniteui-react-layouts';
import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartCategoryTrendLineModule  } from 'igniteui-react-charts';

IgxToolbarModule.register();
IgrDataChartToolbarModule.register();
IgrDataChartCoreModule.register();
IgrDataChartCategoryModule.register();
IgrDataChartAnnotationModule.register();
IgrDataChartInteractivityModule.register();
IgrDataChartCategoryTrendLineModule.register();

Usage

Tool Actions

다음은 도구 모음에 추가할 수 있는 다양한 IgrToolAction 항목 목록입니다.

이러한 도구 각각은 마우스 클릭으로 트리거되는 OnCommand 이벤트를 노출합니다.

새 도구와 기존 도구는 개체의 및 beforeId afterId 속성을 사용하여 overlayId 위치를 변경하고 숨김으로 IgrToolAction 표시할 수 있습니다. ToolActions는 속성도 노출합니다 visibility.

다음 예에서는 기본 제공 항목을 모두 숨기는 방법을 보여줍니다. 확대/축소 재설정 그리고 분석메뉴 메뉴 도구 작업. 새로운 인스턴스 확대/축소 재설정 도구 작업이 추가되어 확대/축소메뉴을 사용하여 afterId 속성을 할당하고 축소. 그러면 새 재설정 도구가 화면 하단에 표시됩니다. 확대/축소메뉴.

React Data Chart Integration

React Toolbar에는 속성이 포함되어 있습니다 Target. 이것은 아래 코드와 같은 구성 요소를 연결하는 데 사용됩니다. IgrDataChart

  private toolbar: IgrToolbar
  private toolbarRef(r: IgrToolbar) {
      this.toolbar = r;
      this.setState({});
  }
  private chart: IgrDataChart
  private chartRef(r: IgrDataChart) {
      this.chart = r;
      this.toolbar.target = this.chart;
      this.setState({});
  }
  public render(): JSX.Element {
        return (
      <div>
        <IgrToolbar
          ref={this.toolbarRef}>
        </IgrToolbar>
      </div>

      <div>
        <IgrDataChart
          ref={this.chartRef}>
        </IgrDataChart>
      </div>
    );
  }

몇 가지 기존 IgrToolAction 항목과 메뉴는 가 IgrDataChart 도구 모음과 연결될 때 사용할 수 있게 됩니다. 다음은 기본 제공 ReactTool IgrDataChart 작업 및 관련 작업 목록입니다. overlayId

확대/축소 작업

ZoomReset: 차트에서 resetZoom 메서드를 호출하여 확대/축소 수준을 기본 위치로 재설정하는 A IgrToolActionLabel 입니다.
ZoomMenu: A IgrToolActionIconMenu that exposes two IgrToolActionLabel items to invoke the zoomIn and zoomOut methods on the chart for increasing/decreasing the chart's zoom level.

추세 조치

AnalyzeMenu: 차트의 다양한 옵션을 구성하기 위한 여러 옵션이 포함된 A IgrToolActionIconMenu 입니다.
AnalyzeHeader: 하위 섹션 헤더입니다.
LinesMenu: 차트에 다양한 가로 점선을 표시하기 위한 다양한 도구가 포함된 하위 메뉴입니다.
- LinesHeader: 다음 세 가지 도구에 대한 하위 메뉴 섹션 헤더입니다.
  - MaxValue: 계열의 최대값에서 y축을 따라 파선 수평선을 표시하는 A IgrToolActionCheckbox 입니다.
  - MinValue: 계열의 최소값에서 y축을 따라 파선 수평선을 표시하는 A IgrToolActionCheckbox 입니다.
  - Average: 계열의 평균값에서 yAxis를 따라 파선 수평선을 표시하는 A IgrToolActionCheckbox 입니다.
TrendsMenu: 그림 영역에 다양한 추세선을 적용하기 위한 도구가 포함된 하위 메뉴입니다 IgrDataChart.
- TrendsHeader: 다음 세 가지 도구에 대한 하위 메뉴 섹션 헤더입니다.
  - 지수의: ᅡ IgrToolActionRadio를 설정합니다. trendLineType 차트의 각 시리즈에서 익스포넨셜핏(ExponentialFit).
  - 선형: ᅡ IgrToolActionRadio를 설정합니다. trendLineType 차트의 각 시리즈에서 리니어핏(LinearFit).
  - 로그: ᅡ IgrToolActionRadio를 설정합니다. trendLineType 차트의 각 계열에서 LogarithmicFit (로그 피팅).
HelpersHeader: 하위 섹션 헤더입니다.
SeriesAvg: of 형식을 Average 사용하여 ValueLayerValueMode 차트의 계열 컬렉션에 a IgrValueLayer를 추가하거나 제거하는 A IgrToolActionCheckbox 입니다.
ValueLabelsMenu: 플롯 영역에 다양한 주석을 표시하기 위한 다양한 도구가 포함된 하위 메뉴입니다 IgrDataChart.
- ValueLabelsHeader: 다음 도구에 대한 하위 메뉴 섹션 헤더입니다.
  - ShowValueLabels: a IgrCalloutLayer를 사용하여 데이터 요소 값을 토글하는 A IgrToolActionCheckbox 입니다.
  - ShowLastValueLabel: a IgrFinalValueLayer를 사용하여 최종 값 축 주석을 토글하는 a IgrToolActionCheckbox 입니다.
ShowCrosshairs: 차트의 crosshairsDisplayMode 속성을 통해 마우스를 십자형 주석으로 전환하는 A IgrToolActionCheckbox 입니다.
ShowGridlines: ᅡ IgrToolActionCheckbox를 적용하여 추가 눈금선을 토글합니다. MajorStroke을 X축으로.

이미지에 저장 작업

CopyAsImage: 차트를 클립보드에 복사하는 옵션을 노출하는 A IgrToolActionLabel 입니다.
CopyHeader: 하위 섹션 머리글입니다.

SVG Icons

도구를 수동으로 추가할 때 이 RenderIconFromText 방법을 사용하여 아이콘을 할당할 수 있습니다. 이 메서드에는 세 가지 매개 변수가 있습니다. 첫 번째는 도구에 정의된 아이콘 컬렉션 이름입니다. iconCollectionName 두 번째는 도구에 정의된 아이콘의 이름(예: iconName SVG 문자열 추가)입니다.

public toolbarCustomIconOnViewInit(): void {

  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';
  
  this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
}

public toolbarCustomIconOnViewInit(): void {

  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';

  this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
}

<IgrToolbar orientation="Vertical" />

Vertical Orientation

기본적으로 React Toolbar는 가로로 표시되지만 속성을 설정하여 orientation 세로로 표시할 수도 있습니다.

<IgrToolbar orientation="Vertical" />

다음 예제에서는 React Toolbar의 세로 방향을 보여 줍니다.

Dependencies

Usage

Tool Actions

React Data Chart Integration

SVG Icons

Vertical Orientation

API References

Additional Resources

React 툴바 개요

React Toolbar Example

Dependencies

Usage

Tool Actions

React Data Chart Integration

SVG Icons

Vertical Orientation

API References

Additional Resources