Telerik Blazor股票图表的共享工具提示

Telerik股票图表允许您为图表中的所有类别显示统一的工具提示。

在本文中:

• 基础知识
• 定制
  • 参数设置
  • 共享模板

基础知识

共享工具提示提供悬浮类别中所有数据点的汇总信息。此工具提示将优先于为特定系列定义的工具提示设置。

启用共享工具提示:

1. 在< TelerikStockChart >标签，添加< StockChartTooltip >标签。
2. 设置它可见参数真正的．
3. 设置它共享参数真正的．

@*这个例子展示了如何启用共享工具提示*@ < StockChartTooltip Visible="true" Shared="true">                 @code { public List StockChartProduct1Data { get; set; } public List StockChartProduct2Data { get; set; } 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) }; StockChartProduct2Data = new List() { new StockDataPoint(new DateTime(2019, 1, 1), 39m, 38m, 44m, 37m, 26320), new StockDataPoint(new DateTime(2019, 2, 1), 37m, 38m, 41m, 40m, 35847), new StockDataPoint(new DateTime(2019, 3, 1), 42m, 43m, 45m, 41m, 76317), new StockDataPoint(new DateTime(2019, 4, 1), 40m, 42m, 43m, 42m, 49222) }; await Task.FromResult(StockChartProduct1Data); await Task.FromResult(StockChartProduct2Data); } 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; } } }

定制

你可以对工具提示进行两种类型的自定义:

• 参数设置-让你改变外观设置，如边界，颜色和填充通过简单的参数
• 共享模板-让你控制整个内容

参数设置

控件的呈现共享工具提示使用:

• 背景-通过应用CSS颜色字符串来控制背景颜色，包括HEX和RGB。默认情况下，它将与类别的颜色匹配。

• 颜色-通过应用CSS颜色字符串来控制文本颜色，包括HEX和RGB。

共享模板

的SharedTemplate允许您控制共享工具提示的呈现。

在模板中你可以:

• 使用业务逻辑并呈现HTML

• 使用上下文参数，该参数提供有关当前类别及其中所有数据点的信息。

的上下文包含以下信息:

• 类别-显示类别的名称。

• 点-此类别中每个系列数据点的数据集合。

每一个点包含以下数据:

• DataItem-当前系列项的数据模型。您需要将其强制转换为来自数据源的类型，该类型需要是可序列化的。

  • 为OHLC而且烛台图表类型DataItem将包含映射到OpenField，CloseField，海菲尔德而且LowField属性。
  • 为行，区域而且列的DataItem将包含映射到场属性。
  • 的DataItem将包含日期的聚合值，因此为了获取它，可以使用类别并将其解析为DateTime．

• 类别-提供关于数据点所在类别的信息。由于股票图表有一个日期X轴类别应投给DateTime．

• SeriesIndex参数的索引< StockChartSeries >数据点属于。

• 百分比-股票图表的价值将永远是0．

• SeriesName对象的Name参数< StockChartSeries >数据点属于。

• SeriesColor-显示数据点所属系列的RGB颜色。

• CategoryIndex-显示数据点的x轴类别索引。

@*这个例子展示了如何使用SharedTemplate并从数据点值中提取信息，并从上下文中获得系列名称*@    @{var points = context.Points;foreach (var point in points) {
  产品名称:@点。SeriesName has High value: @(((point.DataItem as StockDataPoint).High).ToString("C2")) 
 } }                   @code { public List StockChartProduct1Data { get; set; } public List StockChartProduct2Data { get; set; } 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) }; StockChartProduct2Data = new List() { new StockDataPoint(new DateTime(2019, 1, 1), 39m, 38m, 44m, 37m, 26320), new StockDataPoint(new DateTime(2019, 2, 1), 37m, 38m, 41m, 40m, 35847), new StockDataPoint(new DateTime(2019, 3, 1), 42m, 43m, 45m, 41m, 76317), new StockDataPoint(new DateTime(2019, 4, 1), 40m, 42m, 43m, 42m, 49222) }; await Task.FromResult(StockChartProduct1Data); await Task.FromResult(StockChartProduct2Data); } 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; } } }

另请参阅

• 股票图表概述
• 股票图表工具提示概述