Blazor에서 나스닥 100 지수 주식형 차트를 만드는 방법

Blazor Blazor에서 나스닥 100 지수 주식형 차트를 만드는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-12-02 13:25 조회 984회 댓글 0건

본문

관련링크

https://bitbucket.org/ashwin2409/dashboardnasdaq

ComponentOne Blazor에서는 어떤 분야에 종사하든 상관없이 데이터를 시각화할 수 있도록 FlexChart 컨트롤을 제공합니다. FlexChart는 요점을 쉽게 전달하기 위해 많은 양의 데이터를 가상화하고 여러 가지 유형의 차트를 구성할 수 있도록 강력하면서도 간단한 API를 제공하는 빠르고 세련된 고성능 컨트롤입니다.

FlexChart는 기본적인 막대형 차트 또는 꺾은선형 차트에서 원통형 차트 및 히스토그램과 같은 보다 복잡한 차트 유형과 트리맵과 같은 특수 차트까지 다양한 차트 유형을 제공합니다. FlexChart는 기본적인 세부 사항을 관리하므로 개발자가 응용 프로그램과 관련된 중요한 작업에 집중할 수 있습니다.

이 문서에서는 나스닥 100 및 주가의 기록 데이터를 표시하는 작은 대시보드를 만듭니다. 여러 차트 유형을 사용하여 데이터를 시각화하고 라인 표식을 사용하여 가격을 표시해 볼 생각입니다.

이 문서에서 사용하기 위해 나스닥에 상장된 각 주식에 대한 지난 5년 간의 주가 데이터를 가져왔습니다. 그 결과는 아래 이미지와 유사하게 보입니다.

모델 및 도우미 클래스 만들기

데이터를 저장할 모델 클래스 만들기

시각화를 위해 데이터를 가져오고, 저장하고, 조작하는 데 도움이 되는 모델 및 도우미 클래스를 여러 개 만들 것입니다.

FlexChart에서는 이러한 클래스를 사용하여 데이터를 표시합니다. 프로젝트에 Models 폴더를 추가하고 이 폴더에 Models 클래스 파일을 추가합니다. Models.cs 파일에서 다음 내용으로 코드를 바꿉니다.

public abstract class ModelBase : INotifyPropertyChanged  
  {  
      public event PropertyChangedEventHandler PropertyChanged;  

      protected void OnPropertyChanged(string propertyName)  
      {  
          PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));  
      }  
  }  

  public class Quote  
  {  
      public DateTime Date { get; set; }  
      public double Open { get; set; }  
      public double Close { get; set; }  
      public double Volume { get; set; }  
  }  

  public class YearQuote  
  {  
      public int Year { get; set; }  
      public double Open { get; set; }  
      public double Close { get; set; }  

      public double Delta  
      {  
          get { return Close - Open; }  
      }  

      public double DeltaPct  
      {  
          get { return Delta / Open; }  
      }  

      public double DeltaPctAbs  
      {  
          get { return Math.Abs(DeltaPct); }  
      }  
  }  

  public class QuarterVolume : ModelBase  
  {  
      double volume;  
      public string Quarter { get; set; }  
      public double Volume  
      {  
          get { return volume; }  
          set  
          {  
              if (value != volume)  
              {  
                  volume = value;  
                  OnPropertyChanged("Volume");  
              }  
          }  
      }  
      public double Percent { get; set; }  
  }  

  public class DaysOutcome : ModelBase  
  {  
      int days;  
      double percent;  
      public string Outcome { get; set; }  
      public int Days  
      {  
          get { return days; }  
          set  
          {  
              if (value != days)  
              {  
                  days = value;  
                  OnPropertyChanged("Days");  
              }  
          }  
      }  
      public double Percent  
      {  
          get { return percent; }  
          set  
          {  
              if (value != percent)  
              {  
                  percent = value;  
                  OnPropertyChanged("Percent");  
              }  
          }  
      }  

  }  

  public class FluctuationData  
  {  
      public int Percent { get; set; }  
      public int Days { get; set; }  
  }

이러한 클래스는 주식의 단일 거래 가격(또는 주가), 연간 실적, 거래량, 변동 데이터를 나타냅니다. 이제 연도별, 월별 및 분기별 주가, 수익, 델타 및 변동을 제공하기 위해 주식 데이터를 조작하는 DataView라는 클래스를 추가합니다.

이 클래스는 방대하기 때문에 이 문서에서는 해당 코드를 추가하지 않지만 마지막에 샘플에서 이 클래스를 찾을 수 있습니다.

여기서 추가할 또 다른 중요한 클래스는 1984년 이후 나스닥 100의 주식 거래 가격 데이터를 반환하는 DataService 클래스입니다. 나스닥에 대한 JSON 데이터를 이미 가지고 있기 때문에 이 클래스에서는 해당 JSON을 주가 목록으로 변환하지 않습니다.

public List<Quote> GetQuotes()  
{  
     return JsonSerializer.Deserialize<List<Quote>>(json);  
}

JSON 변수에는 JSON 데이터가 포함됩니다. System.Text.Json.JsonSerializer 클래스의 Deserialize 메서드를 사용했습니다. 이 메서드는 원하는 유형으로 데이터를 구문 분석하여 주식 거래 가격 목록이 반환됩니다.

다양한 FlexChart 추가

필요한 패키지 추가

Blazor 응용 프로그램에서 FlexChart를 사용하려면 다음 NuGet 패키지가 필요합니다.

C1.Blazor.Core
C1.Blazor.Chart

이러한 패키지를 설치한 후에는 필요한 CSS와 스크립트를 추가해야 합니다. wwwroot/index.html 파일에서 다음 링크와 스크립트 요소를 추가합니다.

<link rel="stylesheet" href="/_content/C1.Blazor.Core/styles.css" />  
<link rel="stylesheet" href="/_content/C1.Blazor.Chart/styles.css" />  
<script src="/_content/C1.Blazor.Core/scripts.js"></script>  
<script src="/_content/C1.Blazor.Chart/scripts.js"></script>

개요 차트 추가

먼저, 이전 연도에서의 변화와 함께 나스닥의 연도별 거래 가격을 표시하는 개요 차트를 추가합니다. 이 작업을 위해 거품형 차트를 사용합니다.

<FlexChart Style="@style" Tooltip="Year: {Year}<br>Index Gain: {Delta:n1} {DeltaPct:p0}" HeaderContent="Yearly Performance" @ref="@chartBubble" ChartType="ChartType.Bubble"    
                  SelectionMode="ChartSelectionMode.Point" AnimationSettings="AnimationSettings.All">  
                  <SeriesCollection>  
                      <Series BindingX="Delta" Binding="DeltaPct,DeltaPctAbs" SymbolSize="30"></Series>  
                  </SeriesCollection>  
                  <AxisCollection>  
                      <Axis AxisType="AxisType.X" AxisLine="false" MajorGrid="true" Position="Position.Bottom" Title="Index Gain"></Axis>  
                      <Axis AxisType="AxisType.Y" MajorGrid="true" AxisLine="true" Position="Position.Left" Format="0%" ></Axis>  
                  </AxisCollection>  
</FlexChart>

차트의 ChartType을 ChartType.Bubble로 설정합니다. 이전 연도에서의 가격 변동을 시각화하기 위해 차트 바인딩이 DeltaPct 및 DeltaPctAbs로 설정됩니다.

손익 차트 추가

연도별 총 손익을 시각화하려면 원형 차트가 더 좋습니다.

이 원형 차트에는 선택한 연도 또는 데이터 범위의 총 수익 및 총 손실이 표시됩니다.

<FlexPie Style="@style" Palette="Palette.Custom" CustomPalette="@profitPalette" @ref="@chartProfit" Tooltip="{value} days" BindingName="Outcome" Binding="Days"  
                StartAngle="90" SelectionMode="ChartSelectionMode.Point" AnimationSettings="AnimationSettings.All" HeaderContent="Days By Gain/Loss" LegendPosition="Position.None">  
                  <Label>  
                      <PieDataLabel Position="PieLabelPosition.Center" Content="{name} {Percent:n0}%"></PieDataLabel>  
                  </Label>  
</FlexPie>

분기별 볼륨 차트 추가

분기별 거래량을 표시하는 또 다른 차트를 추가합니다. 이 작업을 위해 FlexPie 컴포넌트를 사용합니다.

<FlexPie Style="@style" @ref="@chartQuarter" Tooltip="{name} : {Percent:n0}%" BindingName="Quarter" Binding="Volume" InnerRadius="0.4" StartAngle="90"  
                  SelectionMode="ChartSelectionMode.Point" AnimationSettings="AnimationSettings.All" HeaderContent="Quarters" LegendPosition="Position.None">  
                  <Label>  
                      <PieDataLabel Position="PieLabelPosition.Inside" Content="{name}"></PieDataLabel>  
                  </Label>  
</FlexPie>

월별 볼륨 차트 추가

분기별 거래량을 표시했으므로 월별 거래량도 표시합니다. 이 작업을 위해 세로 막대형 차트를 사용합니다.

<FlexChart Style="@style" SelectionMode="ChartSelectionMode.Point" AnimationSettings="AnimationSettings.All" HeaderContent="Monthly Volume" @ref="@monthsChart"  
                BindingX="Quarter" Binding="Volume">  
                  <SeriesCollection>  
                      <Series></Series>  
                  </SeriesCollection>  
                  <AxisCollection>  
                      <Axis AxisType="AxisType.X" AxisLine="false" Position="Position.Bottom" MajorTickMarks="TickMark.None" LabelAngle="90"></Axis>  
                      <Axis AxisType="AxisType.Y" MajorGrid="false" Labels="false" AxisLine="false"></Axis>  
                  </AxisCollection>  
</FlexChart>

주별 손익 차트 추가

손익 원형 차트에서 선택한 항목에 따라 주별 수익 또는 손실을 보여 주는 차트를 추가합니다.

이 작업을 위해 막대형 차트를 사용하고 해당 차트를 각 주말과 바인딩합니다.

<FlexChart Style="@style" @ref="@chartDays" ChartType="ChartType.Bar" HeaderContent="Days Of Week" Tooltip="{value} days" BindingX="Outcome" Binding="Days"  
                  SelectionMode="ChartSelectionMode.Point" AnimationSettings="AnimationSettings.All">  
                  <SeriesCollection>  
                      <Series></Series>  
                  </SeriesCollection>  
                  <AxisCollection>  
                      <Axis AxisType="AxisType.X" Position="Position.Bottom" AxisLine="false"></Axis>  
                      <Axis AxisType="AxisType.Y" AxisLine="false" Position="Position.Left" MajorGrid="false" Reversed="true"></Axis>  
                  </AxisCollection>  
</FlexChart>

변동 데이터 차트 추가

변동 데이터는 하루, 한 주 또는 지정된 시간 범위에 주가 변화를 보여 줍니다.

<FlexChart Style="@style" @ref="@chartFluctuation" Palette="Palette.Custom" CustomPalette="@fluctuationPalette" HeaderContent="Fluctuation" Tooltip="{value} days"  
                  BindingX="Percent" Binding="Days" AnimationSettings="AnimationSettings.All">  
                  <SeriesCollection>  
                      <Series></Series>  
                  </SeriesCollection>  
                  <AxisCollection>  
                      <Axis AxisType="AxisType.X" Position="Position.Bottom" Format="0\%" AxisLine="false"></Axis>  
                      <Axis AxisType="AxisType.Y" MajorGrid="true" Position="Position.Left" Reversed="false"></Axis>  
                  </AxisCollection>  
</FlexChart>

총 거래 가격 차트 추가

지금까지 수익 또는 월별 차트를 추가했습니다. 하지만 이제 처음부터 끝까지 모든 주식 데이터를 보여 주는 개요 차트를 추가하려고 합니다. 이 차트는 전체 추세를 파악하는 데 도움이 됩니다.

<FlexChart Palette="Palette.Custom" CustomPalette="@fluctuationPalette" Style="@smallStyle" HeaderContent="Monthly Index / Close" @ref="@chartSelection"  
                  ChartType="ChartType.Area" Binding="Close" BindingX="Date">  
                  <SeriesCollection>  
                      <Series Binding="Close" BindingX="Date"></Series>  
                  </SeriesCollection>  
                  <MarkerCollection>  
                      <LineMarker Content="{value:n0}" Interaction="LineMarkerInteraction.Move" Lines="LineMarkerLines.Vertical"></LineMarker>  
                  </MarkerCollection>  
</FlexChart>

이 차트에 LineMarker를 사용했습니다. LineMarker는 마우스를 따라 움직이며 현재 마우스 위치의 가격을 표시합니다.

범위 선택기 차트 추가

또한 데이터를 보고 싶어하는 사용자를 위해 시간 범위 선택기도 추가합니다. 이 작업을 위해 RangeSelector를 사용합니다. RangeSelector는 사용자가 끌어 시간 범위를 선택할 수 있는 선택기 유형 요소를 차트에 추가합니다.

<FlexChart Palette="Palette.Custom" CustomPalette="@fluctuationPalette" Style="@smallStyle" RangeSelector="@rangeSelector" @ref="@chartAll" ChartType="ChartType.Column"  
                  BindingX="Date" Binding="Volume" ItemsSource="mquotes">  
                  <SeriesCollection>  
                      <Series Style="stroke-width: 1"></Series>  
                  </SeriesCollection>  
                  <AxisCollection>  
                      <Axis AxisType="AxisType.X" Position="Position.Bottom" Max="mquotes.Last().Date.ToOADate()" Min="mquotes.First().Date.ToOADate()"></Axis>  
                      <Axis AxisType="AxisType.Y" Labels="false" MajorGrid="false"></Axis>  
                  </AxisCollection>  
</FlexChart>  

RangeSelector rangeSelector = new RangeSelector();  
rangeSelector.ValueChanged += (s, e) =>  
{  
          this.UpdateSelection(rangeSelector.LowerValue, rangeSelector.UpperValue, true);  
};

범위가 바뀔 때마다 선택한 데이터가 업데이트되고 다른 차트가 모두 업데이트됩니다. 이후 세션에서는 UpdateSelection을 구현하려고 합니다.

또한 이 차트만 데이터 소스에 바인딩되고 다른 모든 차트에는 바인딩된 데이터 소스가 없습니다. 다른 차트의 데이터 소스는 선택한 범위에 따라 UpdateSelection 메서드에서 설정됩니다.

동적으로 데이터 업데이트

DataService를 사용하여 데이터 가져오기

이제 DataService 클래스를 사용하여 데이터를 가져와 각 차트를 위해 데이터를 반환하는 DataView 개체의 인스턴스를 만듭니다.

@inject DataService Svc

protected override void OnInitialized()  
  {  
      var quotes = Svc.GetQuotes();  
      dv = new DataView(quotes);  
      mquotes = dv.GetMonthlyQuotes();  
      this.StateHasChanged();  
  }

범위 변경 시 데이터 업데이트

RangeSelector를 사용하여 다양한 차트의 데이터를 업데이트합니다. 선택을 업데이트하는 방법을 이미 구현했으므로 UpdateSelection 메서드로 진행해 보겠습니다.

다양한 차트의 데이터를 업데이트하는 데 RangeSelector 메서드를 사용합니다. 선택을 업데이트하는 방법을 이미 구현했지만 선택한 범위에 따라 차트의 데이터 소스를 모두 업데이트할 수도 있습니다.

이 메서드는 RangeSelector의 낮은 값과 높은 값을 사용하여 범위 내 데이터를 가져옵니다. DataView 클래스는 차트의 데이터 소스로 설정할 수 있는 월, 변동, 거래량, 기타 데이터를 반환합니다.

이 방법은 다소 복잡하기 때문에 이 문서에서는 더 이상 설명하지 않습니다. 그러나 문서 마지막에 나와 있는 샘플 링크에서 해당 내용을 찾을 수 있습니다.

차트 선택 변경 시 데이터 업데이트

또한 다양한 차트에서 선택한 값에 따라 범위를 업데이트해야 합니다.

예를 들어, 기본 개요 거품형 차트에서 연도를 선택하면 해당하는 특정 연도에 대해서만 데이터가 업데이트되어야 합니다.

각 차트의 selectionChanged 이벤트를 처리하여 이 작업을 빠르게 구현할 수 있습니다.

this.AddSelection(chartAll, chartBubble, chartSelection, chartProfit, chartQuarter, chartFluctuation, chartDays, monthsChart);
void AddSelection(params FlexChartBase[] charts)
  {
      foreach (var chart in charts)
      {
          chart.SelectionChanged += (s, e) =>
          {
              this.UpdateSelection(rangeSelector.LowerValue, rangeSelector.UpperValue);
          };
      }
  }

차트에서 다른 데이터 요소를 선택하면 이에 따라 다른 차트가 업데이트됩니다.

blazor 대시보드