Telerik UI for Blazor擁有110+個原生的、易于定制的Blazor UI組件和高性能網格組件，能節約一半的時間開發全新的Blazor應用程序并使傳統web項目現代化，其中囊括了設計和生成工具等。Telerik UI for Blazor控件提供的控件，可輕松滿足應用程序對數據處理、性能、用戶體驗、設計、可訪問性等方面的要求。

通過對各種圖表類型、交互功能、自定義選項和事件處理的支持，Telerik UI for Blazor使財務圖表的研發變得更輕而易舉。

當涉及到在您的Blazor應用程序中開發交互式和視覺上吸引人的財務圖表時，Telerik UI for Blazor是一個強大的工具，這個綜合庫提供了一系列功能和組件，包括圖表和股票圖表組件，可以將您的財務數據可視化提升到一個新的水平。

Telerik UI for Blazor 5.0.1新版下載

在本文中，我們將探討Telerik UI for Blazor如何幫助您增強財務圖表，同時還將提供一些代碼片段幫助您入門。

Telerik UI for Blazor簡介

Telerik UI for Blazor是一個UI組件庫，旨在簡化使用Blazor創建web應用程序的過程，Blazor是Microsoft的Web框架，用于使用C#構建交互式Web應用程序。它為各種用途提供了廣泛的組件，包括圖表、網格、輸入等，在本文中我們將重點討論Telerik UI for Blazor的圖表功能。

Telerik圖表入門指南

要在Blazor中開始使用Telerik圖表，您可以使用<TelerikChart>和<TelerikStockChart>標記。這兩個標簽都允許您輕松地將圖表組件添加到任何Razor頁面，它們提供了與各種類型的財務數據的兼容性，使其成為創建交互式財務圖表的理想選擇。

基本圖表系列類型

<TelerikChart>和<TelerikStockChart>都支持多種系列類型，包括：

• 列
• OHLC (Open-High-Low-Close)
• Candlestick
• 面積
• 行

<TelerikChart>更進一步，提供了額外的系列類型，例如：

• 雷達范圍
• 區域范圍
• 范圍欄
• 瀑布
• 熱圖
• 散點和散點線
• 圓餅圖
• 氣泡圖
• 甜甜圈圖

這種廣泛的支持圖表類型確保您可以選擇最適合的圖表來可視化財務數據。

交互功能

Telerik UI for Blazor圖表的突出功能之一就是交互性，這兩種圖表類型都允許您實現諸如平移和縮放之類的功能，從而使用戶能夠專注于數據的特定部分。當處理大型數據集或當用戶需要放大財務圖表中的特定時間范圍時，此功能尤其有價值。

TelerikStockChart中的導航組件

對于更高級的財務圖表，Telerik股票圖表引入了Navigator（導航）組件。Navigator組件通過提供整個數據集的更小概覽來補充主圖表，用戶可以使用它在主圖表中輕松導航和選擇感興趣的特定區域，此功能對于分析歷史財務數據特別有用。

自定義選項

Telerik UI for Blazor圖表提供了廣泛的自定義選項，您可以自定義兩個軸上的標簽，更改圖表元素的外觀，并應用各種主題來匹配應用程序的整體外觀。此外，當用戶將鼠標懸停在圖表上的數據點上時，您可以使用工具提示為用戶提供額外的信息。

圖表的深入分析

除了已經提到的多功能之外，Telerik UI for Blazor Chart（圖表）還提供了一個有價值的DrillDown選項，允許您為用戶提供更深入的財務數據洞察。使用DrillDown可以使用戶通過單擊特定的圖表元素來交互式地探索詳細信息。這在處理復雜的財務數據集時特別有用，因為用戶可能希望深入研究特定的數據點或類別來進行更仔細的檢查。

事件處理

為了使您的財務圖表更具互動性和響應性，Telerik UI for Blazor圖表組件配備了內置事件。通過在Blazor代碼中處理這些事件，您可以輕松地響應用戶操作，例如單擊數據點，這允許您創建動態和用戶友好的財務圖表體驗。

入門代碼片段

讓我們深入研究一些代碼片段，以演示如何開始使用Telerik UI for Blazor圖表組件。

向項目中添加Telerik UI for Blazor

首先您需要將Telerik UI for Blazor添加到Blazor項目中，可以使用NuGet Package Manager：

dotnet add package Telerik.UI.for.Blazor

在Blazor組件中使用TelerikChart

要在Blazor組件中使用<TelerikChart>，需要添加必要的命名空間，并在Razor頁面中包含圖表組件：

@* The code snippet below illustrate the Open-High-Low-Close, also known as OHLC, series type. *@

@page "/financial-chart"
@using Telerik.Blazor.Components

<TelerikChart Height="400px" Width="640px">
<ChartSeriesItems>
<ChartSeries Type="@ChartSeriesType.OHLC"
Name="Chang"
Data="@ChartProduct1Data"
CategoryField="@(nameof(StockDataPoint.Date))"
OpenField="@nameof(StockDataPoint.Open)"
CloseField="@nameof(StockDataPoint.Close)"
HighField="@nameof(StockDataPoint.High)"
LowField="@nameof(StockDataPoint.Low)">
</ChartSeries>
</ChartSeriesItems>

<ChartCategoryAxes>
<ChartCategoryAxis Type="@ChartCategoryAxisType.Date" BaseUnit="@ChartCategoryAxisBaseUnit.Months">
</ChartCategoryAxis>
</ChartCategoryAxes>

<ChartValueAxes>
<ChartValueAxis>
<ChartValueAxisLabels Format="{0:C4}"></ChartValueAxisLabels>
</ChartValueAxis>
</ChartValueAxes>
</TelerikChart>

@code {
List<StockDataPoint> ChartProduct1Data { get; set; }

protected override async Task OnInitializedAsync()
{
await GenerateChartData();
}

async Task GenerateChartData()
{
ChartProduct1Data = new List<StockDataPoint>()
{
new StockDataPoint(new DateTime(2019, 1, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700),
new StockDataPoint(new DateTime(2019, 2, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000),
new StockDataPoint(new DateTime(2019, 3, 1), 42m, 42.62m, 43.31m, 41.38m, 7631700),
new StockDataPoint(new DateTime(2019, 4, 1), 42.25m, 43.06m, 43.31m, 41.12m, 4922200),
};

await Task.FromResult(ChartProduct1Data);
}

public class StockDataPoint
{
public StockDataPoint() { }

public StockDataPoint(DateTime date, decimal open, decimal close, decimal high, decimal low, int volume)
{
Date = date;
Open = open;
Close = close;
High = high;
Low = low;
Volume = volume;
}
public DateTime Date { get; set; }
public decimal Open { get; set; }
public decimal Close { get; set; }
public decimal High { get; set; }
public decimal Low { get; set; }
public int Volume { get; set; }
}
}

現在我們已經使用TelerikChart組件創建第一個財務圖表：

配置圖表

您可以通過指定系列類型、數據和其他選項來配置圖表。例如，要創建一個基本的燭臺圖：

@* The Candlestick chart series type *@

<TelerikChart Height="480px" Width="640px">
<ChartSeriesItems>
<ChartSeries Type="@ChartSeriesType.Candlestick"
Name="Chang"
Data="@ChartProduct1Data"
CategoryField="@(nameof(StockDataPoint.Date))"
OpenField="@nameof(StockDataPoint.Open)"
CloseField="@nameof(StockDataPoint.Close)"
HighField="@nameof(StockDataPoint.High)"
LowField="@nameof(StockDataPoint.Low)">
</ChartSeries>
</ChartSeriesItems>

<ChartCategoryAxes>
<ChartCategoryAxis Type="@ChartCategoryAxisType.Date" BaseUnit="@ChartCategoryAxisBaseUnit.Months">
</ChartCategoryAxis>
</ChartCategoryAxes>

<ChartValueAxes>
<ChartValueAxis>
<ChartValueAxisLabels Format="{0:C4}"></ChartValueAxisLabels>
</ChartValueAxis>
</ChartValueAxes>
</TelerikChart>

@code {
List<StockDataPoint> ChartProduct1Data { get; set; }

protected override async Task OnInitializedAsync()
{
await GenerateChartData();
}

async Task GenerateChartData()
{
ChartProduct1Data = new List<StockDataPoint>()
{
new StockDataPoint(new DateTime(2019, 1, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700),

// Close is lower than Open, so the Down color is used
new StockDataPoint(new DateTime(2019, 2, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000),

new StockDataPoint(new DateTime(2019, 3, 1), 42m, 42.62m, 43.31m, 41.38m, 7631700),
new StockDataPoint(new DateTime(2019, 4, 1), 42.25m, 43.06m, 43.31m, 41.12m, 4922200),
};

await Task.FromResult(ChartProduct1Data);
}

public class StockDataPoint
{
public StockDataPoint() { }

public StockDataPoint(DateTime date, decimal open, decimal close, decimal high, decimal low, int volume)
{
Date = date;
Open = open;
Close = close;
High = high;
Low = low;
Volume = volume;
}
public DateTime Date { get; set; }
public decimal Open { get; set; }
public decimal Close { get; set; }
public decimal High { get; set; }
public decimal Low { get; set; }
public int Volume { get; set; }
}
}

這是我們的第一個燭臺圖。

添加交互性

要使圖表具有交互性，您可以啟用平移和縮放：

<TelerikChart>
<ChartPannable Enabled="true"></ChartPannable>
<ChartZoomable Enabled="true"></ChartZoomable>

<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Column"
Name="Product 1"
Data="@Data"
Field="@nameof(ChartSeriesData.Product1Sales)"
CategoryField="@nameof(ChartSeriesData.Year)">
</ChartSeries>

<ChartCategoryAxes>
<ChartCategoryAxis Min="1" Max="5">
<ChartCategoryAxisLabels>
<ChartCategoryAxisLabelsRotation Angle="-45" />
</ChartCategoryAxisLabels>
</ChartCategoryAxis>
</ChartCategoryAxes>
</ChartSeriesItems>
</TelerikChart>

@code {
List<ChartSeriesData> Data { get; set; } = new List<ChartSeriesData>();

protected override Task OnInitializedAsync()
{
Data = ChartSeriesData.GenerateData();
return base.OnInitializedAsync();
}

public class ChartSeriesData
{
public int Product1Sales { get; set; }
public DateTime Year { get; set; }
public string SegmentName { get; set; }

public static List<ChartSeriesData> GenerateData()
{
List<ChartSeriesData> data = new List<ChartSeriesData>();

for (int i = 1; i <= 10; i++)
{
var dataItem = new ChartSeriesData
{
Product1Sales = i,
Year = new DateTime(2000 + i, 3, i),
SegmentName = $"{i}"
};

data.Add(dataItem);
}

return data;
}
}
}

處理事件

您可以通過處理事件來響應用戶交互，例如，要處理數據點上的單擊事件：

@* Get the Category from which the user clicked. *@

<TelerikChart OnSeriesClick="@OnSeriesClickHandler">

<ChartTooltip Visible="true">
</ChartTooltip>

<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Bar" Name="Product 1" Data="@series1Data">
</ChartSeries>
<ChartSeries Type="ChartSeriesType.Bar" Name="Product 2" Data="@series2Data">
</ChartSeries>
</ChartSeriesItems>

<ChartCategoryAxes>
<ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
</ChartCategoryAxes>

<ChartTitle Text="Quarterly revenue per product"></ChartTitle>

<ChartLegend Position="ChartLegendPosition.Right">
</ChartLegend>
</TelerikChart>

<div>
Clicked from: @logger
</div>

@code {
public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };

string logger = String.Empty;

void OnSeriesClickHandler(ChartSeriesClickEventArgs args)
{
var category = args.Category.ToString();
logger = category;
}
}

結論

Telerik UI for Blazor提供了一套強大的工具來增強Blazor應用程序中的財務圖表。通過支持各種圖表類型、交互功能、自定義選項和事件處理，它使您能夠創建引人入勝且信息豐富的財務數據可視化。無論您是構建股票市場分析工具，財務儀表板還是任何其他需要圖表功能的應用程序，Telerik UI for Blazor都可以滿足您的需求。

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論