Telerik Blazor股票图表的工具提示
Telerik股票图表为其数据点提供了一个工具提示。您可以有特定于每一个的设置< StockChartSeries >
,所有系列的通用工具提示设置,或共享所有类别的工具提示。
在本文中:
基础知识
默认情况下,点的值将在鼠标悬停时显示。
默认情况下,“股票图”数据点的工具提示是启用的。
为每个单独系列的数据点设置工具提示:
- 在
< StockChartSeries >
,包括< StockChartSeriesTooltip >
标签。 - 设置它
可见
参数真正的
或假
.
@*禁用特定图表系列的工具提示*@ @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 >
将优先于通用工具提示设置。
为所有系列启用相同的工具提示:
- 在
< TelerikStockChart >
,添加< StockChartTooltip >
. - 设置它
可见
参数真正的
.
@*这个例子向你展示了如何为所有数据点创建一个公共的工具提示*@ < 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
-当前系列项的数据模型。您需要将其强制转换为来自数据源的类型,该类型需要是可序列化的。类别
-提供关于数据点所在类别的信息。由于股票图表有一个日期X轴类别
应投给DateTime
.SeriesIndex
参数的索引< StockChartSeries >
数据点属于。百分比
-股票图表的价值将永远是0
.SeriesName
对象的Name参数< StockChartSeries >
数据点属于。SeriesColor
-显示数据点所属系列的RGB颜色。CategoryIndex
-显示数据点的x轴类别索引。
@*这个例子展示了如何使用模板从模型中提供图标和其他信息*@ < stockchartseriestoltip Visible="true"> @context的高值。"SeriesName是@((上下文。DataItemas 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; } } }