radzen chart

HelloBlazorServer/HelloBlazorServer/Components/Pages/Home.razor

@@ -14,6 +14,7 @@
         </RadzenCard>
     </div>
 </div>
+
 <div class="row my-5">
     <RadzenText TextStyle="TextStyle.DisplayH6">💡 자세히 찾아보기</RadzenText>
     <RadzenStack Orientation="Orientation.Horizontal">
@@ -73,10 +74,55 @@
     </div>
 </div>
 
+<div class="row my-5">
+    <div class="col-sm-12 col-lg-8">
+        <RadzenText TextStyle="TextStyle.DisplayH6">💡 행정동 인구수 Top 10</RadzenText>
+        <RadzenCard>
+            <RadzenChart ColorScheme="ColorScheme.Palette">
+                <RadzenLineSeries Title="총 인구(Line)"
+                                  Data="@_populations?.OrderByDescending(c => c.TotalPopulation).Take(10)"
+                                  CategoryProperty="AdministrativeAgency"
+                                  ValueProperty="TotalPopulation"
+                                  LineType="LineType.Dashed">
+                    <RadzenMarkers MarkerType="MarkerType.Auto" />
+                    <RadzenSeriesDataLabels Visible="_isShowDataLabel" />
+                </RadzenLineSeries>
+                <RadzenColumnSeries Title="총 인구(Column)"
+                                    Data="@_populations?.OrderByDescending(c => c.TotalPopulation).Take(10)"
+                                    CategoryProperty="AdministrativeAgency"
+                                    ValueProperty="TotalPopulation">
+                    
+                </RadzenColumnSeries>
+                <RadzenLegend Position="LegendPosition.Bottom"/>
+                <RadzenColumnOptions Radius="5" Width="50"/>
+                <RadzenCategoryAxis Padding="5"/>
+                <RadzenValueAxis Min="0" Max="60000" Step="10000">
+                    <RadzenGridLines Visible="true"/>
+                    <RadzenAxisTitle Text="총 인구"/>
+                </RadzenValueAxis>
+            </RadzenChart>
+        </RadzenCard>
+    </div>
+    <div class="col-sm-12 col-lg-4">
+        <RadzenText TextStyle="TextStyle.DisplayH6">💡 행정동 인구수 Top 10</RadzenText>
+        <RadzenCard>
+            <RadzenChart ColorScheme="ColorScheme.Palette">
+                <RadzenPieSeries Title="총 인구(Pie)"
+                                 Data="@_populations?.OrderByDescending(c => c.TotalPopulation).Take(10)"
+                                 CategoryProperty="AdministrativeAgency"
+                                 ValueProperty="TotalPopulation">
+                </RadzenPieSeries>
+            </RadzenChart>
+        </RadzenCard>
+    </div>
+</div>
+
 @code {
     private IEnumerable<GangnamguPopulation> _populations;
     private IEnumerable<string>? _administrativeAgency;
 
+    private bool _isShowDataLabel = true;
+
     private string _value = string.Empty;
     private string _selectTotalPopulation = string.Empty;
     private string _selectMalePopulation = string.Empty;