Blazor股票图表概述

的Blazor股票图表组件允许您以一种有意义的方式可视化用户在一段时间内财务单位的偏差，以便他们可以得出结论。您可以使用各种图表类型并控制图表外观的所有方面——从颜色和字体到填充、页边距、工具提示和模板。

Telerik股票图表提供了一个导航器扩大或缩短所定义的时间段，并放大图表的特定部分;和一个十字在数据密集的图表中查看精确的值。

的股票图表组件的一部分Blazor的Telerik UI，一个专业级的UI库，包含100多个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

创建股票图表

1. 添加TelerikStockChart标签到你的剃须刀页。
2. 设置DateField参数。TelerikStockChart为模型的相应属性OHLC和烛台StockChart类型。
3. 提供数据为了这个系列。
4. (可选)启用导航器通过包括StockChartNavigator标记，并向其添加映射主图表数据的系列。

@*具有通用设置和导航器的基本股票图表*@                @code {public List StockChartProduct1Data {get;设置;} protected override async Task OnInitializedAsync() {await GenerateChartData(); } public async Task GenerateChartData() { StockChartProduct1Data = new List() { new StockDataPoint(new DateTime(2019, 1, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000), new StockDataPoint(new DateTime(2019, 2, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700), 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(StockChartProduct1Data); } 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; } } }

自定义图表元素-嵌套标签设置

在图表中配置嵌套属性和子元素时，内部标记将包含它们的父标记名称，并在其末尾添加细节。一般来说，这种嵌套标记的结构将是< StockChart *级* * *细节>类别可以是以下其中之一:

• CategoryAxis
• ChartArea
• 传说
• 导航器
• PlotArea
• SeriesItems
• 标题
• 工具提示
• ValueAxis
• 和其他人

要自定义图表，请寻找嵌套标记及其属性——内部标记将包含它们的父标记名称并在其末尾添加细节。例如，StockChartSeries标签有一个StockChartSeriesTooltip标记，该标记公开配置选项和更多子标记。

通过使用嵌套标记提供的设置，您可以自定义股票图表的所有方面。

一个例子就是标签的旋转。您可以使用

StockChartCategoryAxes>StockChartCategoryAxis>StockChartCategoryAxisLabels>StockChartCategoryAxisLabelsRotation标签

并设置角属性转换为以度为单位的所需值(它们可能是负数或正数)。通过使用类似的方法，你可以控制StockChartCategoryAxisLabelsMargin(添加上、下、左、右空白)，StockChartCategoryAxisLabelsPadding(为顶部，底部，左边和右边添加填充)和其他。

这种方法不仅限于标签——它可以用于适用于图表类型的所有标签，例如图表标题StockChartTitle>StockChartTitleMargin．

股票图表大小

要控制StockChart的大小，请使用宽度和高度参数。

还可以以百分比值设置图表大小，以便在呈现时占用其容器。如果父容器大小改变，必须调用图表的Refresh ()在重绘DOM并呈现新的容器尺寸之后，使用c#方法。当显式更改容器大小(如下例所示)或从事件调用的代码(如window.resize．你可以找到一个重新绘制图表的例子window.resize在响应图样本。

你可以制作一个响应式图表调整容器大小并重新绘制图表 
                
 @code {Telerik.Blazor.Components.TelerikStockChart myStockChartRef {get; set; } string ContainerWidth { get; set; } = "400px"; string ContainerHeight { get; set; } = "300px"; public List StockChartProduct1Data { get; set; } async Task ResizeChart() { ContainerHeight = "500px"; ContainerWidth = "800px"; await Task.Delay(20); myStockChartRef.Refresh(); } protected override async Task OnInitializedAsync() { await GenerateChartData(); } public async Task GenerateChartData() { StockChartProduct1Data = new List() { new StockDataPoint(new DateTime(2019, 1, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000), new StockDataPoint(new DateTime(2019, 2, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700), 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(StockChartProduct1Data); } 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; } } }

StockChart参数

下表列出了StockChart参数，这些参数在组件文档的其他地方没有讨论。

组件引用和方法

要执行StockChart方法，请通过获取对组件实例的引用@ref．

下一个步骤

• 将数据绑定到StockChart
• 探索导航器
• 了解更多关于准星

另请参阅

• 现场演示:股票图表
• API参考