대화형 Blazor 차트 생성하기

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-06-07 11:57 조회 4,001회 댓글 0건

본문

첨부파일

blazorchart.zip (122.9K)

관련링크

ComponentOne 의 2020 v2 릴리스 에서 Blazor를위한 두 가지 새로운 데이터 시각화 구성 요소 인 FlexChart 및 FlexPie를 도입했습니다.

이 문서에서는 세로 막 대형, 막 대형, 선, 분산 형, 영역 및 단계 차트를 포함하여 많은 수의 데카르트 플롯을 생성하는 시각적 구성 요소 인 FlexChart에 대해 간략히 소개합니다.

Blazor 및 WebAssembly

Blazor는 웹 UI 개발을위한 새롭고 유망한 플랫폼입니다. 현재 호스팅 환경에 따라 다른 두 가지 Blazor 버전이 있습니다 (더 많이 출시 될 수 있지만 개발 초기 단계에 있음).

Blazor Server - 서버에서 실행되며 특수 SignalR 라이브러리를 통해 브라우저와 통신합니다.
Blazor Client (Blazor WebAssembly) - WebAssembly에서 구현된 런타임에 의해, 브라우저에서 실행되는 .NET 코드를 사용하여 브라우저에서 직접 실행됩니다.

Quick Blazor 샘플

실제 코드로 이동하여 첫 번째 Blazor 차트를 만들어 보겠습니다.

1. Blazor 프로젝트 만들기

Visual Studio를 열고 새 프로젝트를 만든 다음 BlazorApp 템플릿을 선택합니다.

대화 형 Blazor 차트 시작하기

다음 단계에서 프로젝트의 이름과 위치를 설정할 수 있습니다.

마지막 단계에서 응용 프로그램 유형을 서버 또는 웹 어셈블리 (클라이언트) 중에서 선택합니다.

대화 형 Blazor 차트 시작하기

다음을 클릭하고 Blazor 서버 애플리케이션을 생성하겠습니다.

이 템플릿으로 만든 프로젝트에는 여러 페이지가 있으며, 가장 적합한 페이지는 간단한 웹 서비스에서 데이터를 수신하는 HTML 테이블이 포함 된 FetchData 페이지입니다.

우리에게 필요한 것은 페이지의 표를 차트로 바꾸는 것입니다.

2. FlexChart의 패키지를 추가합니다.

솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 "NuGet 패키지 관리 .."를 선택합니다.

C1.Blazor.Chart 패키지를 찾아 설치합니다.

3. 클라이언트 JavaScript를 추가합니다.

차트 및 다소 복잡한 Blazor 구성 요소는 클라이언트 JavaScript의 일부 지원이 필요합니다.

이제 수동으로 참조를 추가해야합니다.

Pages 폴더에서 _Host.cshtml 파일을 열고 <head>섹션 끝에 다음 줄을 추가합니다 .

<script src="~/_content/C1.Blazor.Chart/scripts.js"></script>

4. 그리드를 차트로 바꿉니다.

Pages 폴더에서 FetchData.razor 페이지를 열고 <table>태그를 제거 하고 처음에 using 문을 추가합니다.

@using C1.Chart
@using  C1.Blazor.Chart

다음 차트 정의를 삽입하십시오.

FetchData.razor

<FlexChart ItemsSource="forecasts" BindingX="Date">
    <SeriesCollection>
          <Series Binding="TemperatureC" />
    </SeriesCollection>
</FlexChart>

이 선언은 차트 구성 요소를 만들고 데이터 바인딩과 관련된 주요 속성을 설정합니다.

ItemsSource- 데이터 소스 콜렉션.
BindingX -x 축을 따라 표시된 값입니다.
Binding -y 축을 따라 표시된 값입니다.

이미 프로젝트를 실행하고 데이터 가져 오기 페이지를 열고 다음과 같은 내용을 볼 수 있습니다.

대화 형 Blazor 차트 시작하기

차트를 좀 더 멋지게 만들기 위해 헤더를 추가하고 축에 일부 서식을 적용하고 차트 유형을 부드러운 선 (ChartType.SplineSymbols)으로 변경할 수 있습니다.

FetchData.razor

<FlexChart ItemsSource="forecasts" BindingX="Date" ChartType="ChartType.SplineSymbols" HeaderContent="5-days forecast" HeaderStyle="font-size:24px">
  <SeriesCollection>
      <Series Binding="TemperatureC"/>
  </SeriesCollection>
  <AxisCollection>
      <Axis AxisType="AxisType.X" Position="Position.Bottom" AxisLine="false" Format="MMM-d" MajorTickMarks="TickMark.None"/>
      <Axis AxisType="AxisType.Y" Position="Position.Left" Title="Temperature, C" AxisLine="false" MajorTickMarks="TickMark.None" MajorGrid="true"/>
  </AxisCollection>
</FlexChart>

차트는 다음과 같아야합니다.

대화 형 Blazor 차트 시작하기

차트 사용자 정의에 CSS를 사용할 수도 있습니다. 이 차트 규칙을 site.css에 추가합니다.

site.css

.chart {
  width: 100%;
  height: 320px;
  padding: 15px 10px;
  border: 1px solid #e4e4e4;
}

그리고 차트의 클래스 속성을 설정합니다.

<FlexChart Class="chart" .. >

최종 결과는 다음과 같습니다.

대화 형 Blazor 차트 시작하기

실제 데이터 추가

이전 섹션에서 만든 차트는 가짜 정적 데이터를 사용하지만 실제 데이터로 작업하는 것이 훨씬 더 흥미 롭습니다. 우선 데이터가 필요합니다. 최근에 좋은 날씨 데이터 소스를 찾았습니다.

https://worldweather.wmo.int/en/dataguide.html

단기 예측으로 많은 도시에 대한 과거 평균 날씨 데이터를 제공합니다. 두 도시의 월 평균 기온을 보여주는 차트를 만들어 보겠습니다.

1. 필수 패키지 추가

데이터는 JSON으로 반환되므로 처음에는 파싱해야합니다. 유용한 몇 가지 확장 메서드가있는 System.NET.Http.Json 패키지를 설치해 보겠습니다.

2. 데이터 서비스 생성

파싱 된 JSON 데이터를 C # 클래스에 매핑하는 것이 항상 편리합니다. 그렇게하는 데는 많은 방법이 있다고 생각합니다. 방금 찾은 첫 번째 온라인 도구를 사용했습니다. 샘플 JSON을 기반으로 C # 클래스를 생성하고 정리하고 편의를 위해 구문 분석 및 변환을 추가했습니다.

데이터 바인딩의 가장 중요한 클래스에는 한 달 동안의 평균 온도 데이터가 포함됩니다.

ClimateService.cs

public class ClimateMonth
{
    public int month { get; set; }
    public string maxTemp { get; set; }
    public string minTemp { get; set; }

    public double MaxT { get { return double.Parse(maxTemp); } }
    public double MinT { get { return double.Parse(minTemp); } }
    public string MonthShort
    {
        get { return CultureInfo.CurrentCulture.DateTimeFormat.AbbreviatedMonthNames[month - 1]; }
    }
}

그런 다음 도시 이름으로 기후 데이터를 가져 오는 간단한 웹 서비스를 만들었습니다.

main 메소드는 worldweather.wmo.int 에서 데이터를 요청 하고 지정된 도시에 대한 월 평균 목록 (Class ClimateMonth)으로 리턴합니다.

ClimateService.cs

public async Task<List<ClimateMonth>> GetClimateData(string city)
{
    int code = GetCityCode(city);
    if (code!=0)
    {
        var root = await Http.GetFromJsonAsync<Root>( string.Format("https://worldweather.wmo.int/en/json/{0}_en.json", code));
        return root.city.climate.climateMonth;
    } else
        return null;
}

3. 설정 차트

이제 차트를 만들 준비가되었습니다. 이를 위해 새 페이지 Climate.razor를 만들어 보겠습니다. 코드는 매우 간단합니다. 전체 페이지는 다음과 같습니다.

Climate.razor

@page "/climate"

@using C1.Chart
@using C1.Blazor.Chart
@using BlazorApp5.Data
@inject ClimateService ClimateService

<h1>City Climate Comparision</h1>

@if (climateData1 == null && climateData2 == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <FlexChart class="chart" ChartType="ChartType.Area" ItemsSource="climateData1" BindingX="MonthShort" Binding="MinT,MaxT"
               HeaderContent="Average temperature (°C) by month" HeaderStyle="font-size:24px">
        <SeriesCollection>
            <Series Name="@city1" />
            <Series Name="@city2" ItemsSource="climateData2"/>
        </SeriesCollection>
    </FlexChart>
}
@code {
    private string city1 = "Singapore";
    private List<ClimateMonth> climateData1;
    private string city2 = "New York City";
    private List<ClimateMonth> climateData2;
    protected override async Task OnInitializedAsync()
    {
        climateData1 = await ClimateService.GetClimateData(city1);
        climateData2 = await ClimateService.GetClimateData(city2);
    }
}

날짜 서비스를 페이지에 삽입하고 두 개의 시리즈가있는 차트를 만들고 OnIntializedAsync () 메서드에 데이터를로드합니다. 범위 영역 플롯이고 바인딩에 대해 두 개의 쉼표로 구분 된 속성을 지정합니다.

하나는 최소값이고 다른 하나는 최대 값입니다.

Binding = "MinT, MaxT" .

Shared \ NavMenu.razor 파일의 네비게이터에 페이지를 추가 한 후 :

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
  <ul class="nav flex-column">
      ...
      <li class="nav-item px-3">
          <NavLink class="nav-link" href="climate">
              <span class="oi oi-list-rich" aria-hidden="true"></span> City Climate
          </NavLink>
      </li>
  </ul>
</div>

프로젝트를 실행할 준비가되었습니다. "도시 기후"페이지를 열면 다음 차트가 표시됩니다.

대화 형 Blazor 차트 시작하기