이 블로그에서는 Blazor FlexChart 컨트롤에 포함된 뛰어난 다른 기능 중 일부를 살펴보면서 대화형 Blazor 차트 시작하기에서 만든 샘플 Alex Trefilov 확장에 대해 집중적으로 살펴봅니다.

프로젝트 설정에 필요한 모든 전처리 단계와 함께 원래 샘플 다운로드 링크는 Alex의 블로그에 포함되어 있습니다.

새 릴리스마다 추가되어 Blazor FlexChart 컨트롤에서 살펴볼 수 있는 기능은 수백 가지이지만 블로그의 내용이 지나치게 길어지지 않도록 여기서는 범례, 선택 모드, 추세선, 여러 그림 영역과 관련 기능 및 구현에 대해서만 다룹니다.

바로 시작해 보겠습니다!

범례

Blazor FlexChart 컨트롤에서 범례(Legends)는 차트에 표시되는 정보를 전달하는 것보다 더 많은 기능을 수행할 수 있습니다.

LegendToggle 속성이 true로 설정된 상태에서는 차트에서 범례를 클릭하여 계열 표시 여부를 켜거나 끌 수 있습니다. 이 기능은 표시된 계열을 변경하려고 할 때마다 코드를 수동으로 편집하고 프로젝트를 다시 시작할 필요 없이 런타임에 차트에서 여러 계열의 결합을 보려는 경우 유용합니다.

LegendPosition 및 LegendStyle 속성을 사용하면 차트를 기준으로 범례가 표시되는 위치와 범례 내에서 글꼴의 모양을 완벽하게 제어할 수 있습니다.

LegendTitle 속성을 사용하면 범례 위에 적절한 제목을 표시할 수도 있습니다. 아래 HTML 코드를 Razor 페이지에서 직접 사용하면 이러한 속성을 활성화할 수 있습니다.

LegendPosition="Position.Bottom" LegendStyle="font-size:18px" LegendToggle="true"

선택

차트 내에서 선택(Selection) 속성을 사용하면 데이터 분석을 지원하기 위해 최종 사용자가 런타임에 특정 데이터 요소 또는 전체 계열을 선택하고 강조 표시할 수 있습니다. FlexChart에서 선택 속성은 기본적으로 비활성화되어 있습니다.

이 설정을 활성화하려면 아래 표시된 것처럼 Razor 페이지의 FlexChart HTML 부분 내 ChartSelectionMode 열거에서 SelectionMode 속성을 Point 또는 Series로 설정합니다.

SelectionMode="ChartSelectionMode.Series"

기본적으로 선택 항목은 빨간색 실선으로 강조 표시됩니다. Razor 페이지의 HTML 부분에서 SelectionStyle 속성을 설정하여 선택 영역이 강조 표시되는 방법을 사용자 정의할 수 있습니다. 그러면 강조 표시된 선택 항목의 색상을 변경하고, 강조 표시 테두리의 너비를 설정하며, 선택 항목에 표시할 테두리 유형을 선택할 수 있습니다.

이 예에서는 선택 영역은 진한 파랑으로, 테두리는 더 얇게 표시하고 테두리 유형은 파선으로 설정합니다.

이와 같이 설정하기 위한 코드는 아래와 같습니다.

SelectionStyle="stroke:darkblue;stroke-width:2px;stroke-dasharray:5,5"

선택한 설정은 아래와 같이 표시됩니다.

여기서 Alex의 샘플을 따르면 FlexChart의 전체 HTML 부분은 다음과 같아야 합니다.

<FlexChart Class="chart" ChartType="ChartType.Area" ItemsSource="climateData1" BindingX="MonthShort"        
  HeaderContent="Average temperature range (°C) by month" HeaderStyle="font-size:24px"
  FooterContent="Data source: WMO World Weather Information Service (https://worldweather.wmo.int)"          
  SelectionMode="ChartSelectionMode.Series" Palette="Palette.Light"
  SelectionStyle="stroke:darkblue;stroke-width:2px;stroke-dasharray:5,5"
  LegendPosition="Position.Bottom" LegendStyle="font-size:18px" LegendToggle="true">
    <SeriesCollection>
          <Series Name="@city1" Binding="MinT,MaxT" />
          <Series Name="@city2" Binding="MinT,MaxT" ItemsSource="climateData2" />
    </SeriesCollection>
    <AxisCollection>
        <Axis Title="Temp. (C)" AxisType="AxisType.Y" Position="Position.Left" MajorGrid="false" />
    </AxisCollection>
</FlexChart

추세선

이름으로 알 수 있듯이 추세선(trendline)은 데이터의 추세를 나타내는 데 사용되며, 예측값 또는 평균 값이 표시된 데이터와 관련이 있는 경우 일반적으로 용량에 사용됩니다. 금융 시장의 기술적 분석과 시간에 따른 변화를 보여주는 과학적 연구는 추세선 추가로 데이터를 좀 더 쉽게 해석할 수 있는 일반적인 두 가지 예입니다.

다행스럽게도 Razor 페이지의 HTML 부분에서 SeriesCollection 태그 내에 코드를 한 행만 입력하면 Blazor FlexChart에 추세선을 추가할 수 있습니다. FlexChart에 추세선을 여러 개 추가할 수 있는데, 계열 간에 데이터를 분할하면 이 프로세스를 더 쉽게 만들 수 있습니다. 아래 코드는 프로젝트에서 각 계열에 하나씩 추세선을 구현하는 방법을 보여줍니다.

<SeriesCollection>
      <Series Name="@city1" Binding="MinT,MaxT" />
      <Series Name="@city2" Binding="MinT,MaxT" ItemsSource="climateData2" />
      <TrendLine Name="Avg. Temp. City 1" FitType="FitType.Linear" Binding="AvgT" />
      <TrendLine Name="Avg. Temp. City 2" FitType="FitType.Linear" Binding="AvgT" ItemsSource="climateData2" />
</SeriesCollection>

다음은 추세선이 추가된 경우 차트의 모양입니다.

여기서 두 번째 추세선은 너무 밝고 파란색 위에 파란색은 눈에 잘 띄지 않으므로 아래 코드에 표시된 것처럼 Style 속성을 사용하여 두 번째 추세선의 색상을 좀 더 어둡고 대비되는 색상으로 변경해 보겠습니다.

<TrendLine Name="Avg. Temp. City 2" FitType="FitType.Linear" Binding="AvgT" ItemsSource="climateData2" Style="color:brown" />

이제 두 번째 추세선이 더 잘 보입니다.

여러 그림 영역

Blazor FlexChart 컨트롤의 또 다른 흥미로운 기능은 컨트롤의 API에 기본 제공되는 PlotAreaCollection을 활용하여 여러 그림 영역(plot-area.)을 구현하는 기능입니다. 또한 속성을 활용하여 차트에 추가된 그림 영역의 높이, 너비, 행 인덱스 및 열 인덱스를 제어할 수 있습니다.

기존 데이터 요소 위에 추가 계열 적용, 차트 채우기만 가능하도록 제한하는 것보다 여러 그림 영역을 적용하는 기능이 있으면 데이터의 가독성이 높아져 보다 정확한 분석이 가능해집니다.

한 데이터 집합 위에 다른 데이터 집합이 표시되는 것이 마음에 들지 않았으므로, 차트 하나는 그대로 유지하고 여러 그림 영역을 사용하여 데이터 집합을 분할해 최종 사용자에게 데이터가 보다 명확하게 표시되도록 할 수 있습니다. 데이터 변환 방식은 여러분에게 달려 있지만 이 경우에는 간단하게 유지해 보겠습니다.

FlexChart에서 여러 그림 영역을 구현하려면 아래 코드를 활용할 수 있습니다.

PlotAreaCollection은 여러 차트 그림을 제어하고 AxisCollection 내에서 PlotAreaName 속성 참조는 PlotArea를 적절한 축 속성과 연결합니다.

각 차트의 X축과 Y축에 대한 실제 데이터는 Series Collection AxisX와 AxisY 속성에서 정보를 가져오는 AxisCollection 내 “Name” 속성을 통해 참조됩니다. FlexChart HTML 속성은 포함되지 않습니다. 전체 코드를 보려면 샘플을 다운로드하여 Climate.razor 페이지를 보십시오.

SeriesCollection

<SeriesCollection>
        <Series Name="@city1" Binding="MinT,MaxT" AxisX="X" AxisY="Y" />
        <Series Name="@city2" Binding="MinT,MaxT" ItemsSource="climateData2" AxisX="X2" AxisY="Y2" />
</SeriesCollection>

AxisCollection

<AxisCollection>2.
          <Axis Title="Temp. (C)" AxisType="AxisType.Y" Position="Position.Left" MajorGrid="false" Name="Y" Min="-20" Max="40" PlotAreaName="PlotArea1" />
          <Axis Title="Month" AxisType="AxisType.X" Position="Position.Bottom" MajorGrid="false" Name="X" PlotAreaName="PlotArea1" />
​
          <Axis Title="Temp. (C)" AxisType="AxisType.Y" Position="Position.Left" MajorGrid="false" Name="Y2" Min="-20" Max="40" PlotAreaName="PlotArea2" />
          <Axis Title="" AxisType="AxisType.X" Position="Position.Top" MajorGrid="false" Labels="false" Name="X2" MinorGrid="false" PlotAreaName="PlotArea2" />
</AxisCollection>

PlotAreaCollection

<PlotAreaCollection>
           <PlotArea Name="PlotArea1" Row="2" />
           <PlotArea Name="PlotArea2" />
</PlotAreaCollection>

지금 ComponentOne을 다운받아보세요.