Blazor股票图表概述

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

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

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

下载免费试用

创建股票图表

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

@*具有通用设置和导航器的基本股票图表*@             @code{公共列表 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参考