Peace
/
HelloBlazorServer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

radzen chart ui 2

Browse Source
main
Peace 10 months ago
parent ac61ace1a7
commit 8472e15420
1 changed files with 110 additions and 3 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 113
      HelloBlazorServer/HelloBlazorServer/Components/Pages/Home.razor

113
HelloBlazorServer/HelloBlazorServer/Components/Pages/Home.razor
Unescape View File

@ -76,7 +76,7 @@
<div class="row my-5"> <div class="row my-5">
<div class="col-sm-12 col-lg-8"> <div class="col-sm-12 col-lg-8">
<RadzenText TextStyle="TextStyle.DisplayH6">💡 행정동 인구수 Top 10</RadzenText> <RadzenText TextStyle="TextStyle.DisplayH6">💡 행정동별 인구수 Top 10</RadzenText>
<RadzenCard> <RadzenCard>
<RadzenChart ColorScheme="ColorScheme.Palette"> <RadzenChart ColorScheme="ColorScheme.Palette">
<RadzenLineSeries Title="총 인구(Line)" <RadzenLineSeries Title="총 인구(Line)"
@ -84,8 +84,8 @@
CategoryProperty="AdministrativeAgency" CategoryProperty="AdministrativeAgency"
ValueProperty="TotalPopulation" ValueProperty="TotalPopulation"
LineType="LineType.Dashed"> LineType="LineType.Dashed">
<RadzenMarkers MarkerType="MarkerType.Auto" />
<RadzenSeriesDataLabels Visible="_isShowDataLabel" /> <RadzenSeriesDataLabels Visible="_isShowDataLabel" />
<RadzenMarkers MarkerType="MarkerType.Auto" />
</RadzenLineSeries> </RadzenLineSeries>
<RadzenColumnSeries Title="총 인구(Column)" <RadzenColumnSeries Title="총 인구(Column)"
Data="@_populations?.OrderByDescending(c => c.TotalPopulation).Take(10)" Data="@_populations?.OrderByDescending(c => c.TotalPopulation).Take(10)"
@ -104,19 +104,126 @@
</RadzenCard> </RadzenCard>
</div> </div>
<div class="col-sm-12 col-lg-4"> <div class="col-sm-12 col-lg-4">
<RadzenText TextStyle="TextStyle.DisplayH6">💡 행정동 인구수 Top 10</RadzenText> <RadzenText TextStyle="TextStyle.DisplayH6">💡 행정동별 인구수 Top 10</RadzenText>
<RadzenCard> <RadzenCard>
<RadzenChart ColorScheme="ColorScheme.Palette"> <RadzenChart ColorScheme="ColorScheme.Palette">
<RadzenPieSeries Title="총 인구(Pie)" <RadzenPieSeries Title="총 인구(Pie)"
Data="@_populations?.OrderByDescending(c => c.TotalPopulation).Take(10)" Data="@_populations?.OrderByDescending(c => c.TotalPopulation).Take(10)"
CategoryProperty="AdministrativeAgency" CategoryProperty="AdministrativeAgency"
ValueProperty="TotalPopulation"> ValueProperty="TotalPopulation">
<RadzenSeriesDataLabels Visible="_isShowDataLabel" />
</RadzenPieSeries> </RadzenPieSeries>
</RadzenChart> </RadzenChart>
</RadzenCard> </RadzenCard>
</div> </div>
</div> </div>
<div class="row my-5">
<div class="col-sm-12 col-lg-4">
<RadzenText TextStyle="TextStyle.DisplayH6">💡 남성 인구수 Top 5</RadzenText>
<RadzenCard>
<RadzenChart ColorScheme="ColorScheme.Palette">
<RadzenDonutSeries Title="남성 인구수(Donut)"
Data="@_populations?.OrderByDescending(c => c.MalePopulation).Take(5)"
CategoryProperty="AdministrativeAgency"
ValueProperty="MalePopulation"
TotalAngle="180"
StartAngle="180">
<ChildContent>
<RadzenSeriesDataLabels Visible="@_isShowDataLabel"/>
</ChildContent>
<TitleTemplate>
<div class="rz-donut-content">
<div>남성 인구 Top 5</div>
<div>for 2023</div>
</div>
</TitleTemplate>
</RadzenDonutSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>
</RadzenCard>
</div>
<div class="col-sm-12 col-lg-4">
<RadzenText TextStyle="TextStyle.DisplayH6">💡 여성 인구수 Top 5</RadzenText>
<RadzenCard>
<RadzenChart ColorScheme="ColorScheme.Palette">
<RadzenDonutSeries Title="여성 인구수(Donut)"
Data="@_populations?.OrderByDescending(c => c.FemalePopulation).Take(5)"
CategoryProperty="AdministrativeAgency"
ValueProperty="FemalePopulation"
TotalAngle="180"
StartAngle="180">
<ChildContent>
<RadzenSeriesDataLabels Visible="@_isShowDataLabel" />
</ChildContent>
<TitleTemplate>
<div class="rz-donut-content">
<div>여성 인구 Top 5</div>
<div>for 2023</div>
</div>
</TitleTemplate>
</RadzenDonutSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>
</RadzenCard>
</div>
<div class="col-sm-12 col-lg-4">
<RadzenText TextStyle="TextStyle.DisplayH6">💡 성비 Top 5</RadzenText>
<RadzenCard>
<RadzenChart ColorScheme="ColorScheme.Palette">
<RadzenDonutSeries Title="성비(Donut)"
Data="@_populations?.OrderByDescending(c => c.SexRatio).Take(5)"
CategoryProperty="AdministrativeAgency"
ValueProperty="SexRatio"
TotalAngle="180"
StartAngle="180">
<ChildContent>
<RadzenSeriesDataLabels Visible="@_isShowDataLabel" />
</ChildContent>
<TitleTemplate>
<div class="rz-donut-content">
<div>성비 Top 5</div>
<div>for 2023</div>
</div>
</TitleTemplate>
</RadzenDonutSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>
</RadzenCard>
</div>
</div>
<div class="row my-5">
<div class="col-sm-12 col-lg-12">
<RadzenText TextStyle="TextStyle.DisplayH6">💡 인구 통계 Top 5</RadzenText>
<RadzenChart ColorScheme="ColorScheme.Palette" Style="height: 400px">
@* <RadzenStackedBarSeries Title="인구수(계)"
Data="@_populations?.OrderByDescending(c => c.TotalPopulation).Take(5)"
CategoryProperty="AdministrativeAgency"
ValueProperty="TotalPopulation">
<RadzenSeriesDataLabels Visible="_isShowDataLabel" />
</RadzenStackedBarSeries> *@
<RadzenStackedBarSeries Title="인구수(남)"
Data="@_populations?.OrderByDescending(c => c.MalePopulation).Take(5)"
CategoryProperty="AdministrativeAgency"
ValueProperty="MalePopulation">
<RadzenSeriesDataLabels Visible="_isShowDataLabel" />
</RadzenStackedBarSeries>
<RadzenStackedBarSeries Title="인구수(여)"
Data="@_populations?.OrderByDescending(c => c.FemalePopulation).Take(5)"
CategoryProperty="AdministrativeAgency"
ValueProperty="FemalePopulation">
<RadzenSeriesDataLabels Visible="_isShowDataLabel" />
</RadzenStackedBarSeries>
<RadzenValueAxis>
<RadzenGridLines Visible="true"/>
<RadzenAxisTitle Text="인구수"/>
</RadzenValueAxis>
<RadzenBarOptions Radius="5" Height="40"/>
</RadzenChart>
</div>
</div>
@code { @code {
private IEnumerable<GangnamguPopulation> _populations; private IEnumerable<GangnamguPopulation> _populations;
private IEnumerable<string>? _administrativeAgency; private IEnumerable<string>? _administrativeAgency;

Write Preview
Loading…
Cancel
Save