Telerik Blazor股票图的工具提示

Telerik股票图表为其数据点提供了一个工具提示。您可以有特定于每一个的设置< StockChartSeries >，所有系列的通用工具提示设置，或共享所有类别的工具提示。

在本文中:

• 基础知识
• 常见的工具提示
• 定制
  • 参数设置
  • 模板

基础知识

默认情况下，点的值将在鼠标悬停时显示。

默认情况下，股票图表数据点的工具提示是启用的。

为每个系列的数据点设置工具提示:

1. 在< StockChartSeries >，包括< StockChartSeriesTooltip >标签。
2. 设置它可见参数真正的或假．

@*禁用特定图表系列的工具提示*@                @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; } } }

常见的工具提示

图表允许您一次性为所有系列启用和定义通用工具提示设置。它看起来像单独的工具提示(当鼠标悬停在上面时将显示点的值)，但您只声明它一次。

设置为特定的工具提示< StockChartSeries >将优先于通用工具提示设置。

为所有系列启用相同的工具提示:

1. 在< TelerikStockChart >，添加< StockChartTooltip >．
2. 设置它可见参数真正的．

这个例子展示了如何为所有数据点创建一个通用的工具提示*@ < StockChartTooltip Visible="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。

• 使用模板控制在工具提示中呈现的内容。

这个例子展示了如何使用参数设置自定义工具提示*@   < StockChartSeriesTooltip Visible="true" Background="#6495ED" Color="#F0F8FF">            @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。

• 使用模板要控制工具提示中呈现的内容—它提供的标记名称和数据与特定的工具提示相同，但它同时影响所有系列。

模板

的模板允许您控制工具提示的呈现并向用户包含附加信息。

在模板中，你可以:

• 使用业务逻辑并呈现HTML

• 使用上下文参数，提供有关当前数据点的信息。

中可用的系列数据点信息上下文是:

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

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

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

• SeriesIndex-提供索引< StockChartSeries >数据点属于。

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

• SeriesName-绑定到< StockChartSeries >数据点属于。

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

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

这个例子展示了如何使用模板从模型中提供图标和其他信息*                  @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; } } }

另请参阅

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