Blazor的Telerik UI下载30天免费试用

OHLC股票图

OHLC(开-高-低-收)图通常用于说明金融工具价格随时间的变化。图表上的每条垂直线显示了一段时间内的价格范围(最高和最低价格)。

OHLC系列股票图。下面第一个代码片段的结果。

Blazor基本Ohlc图表

本文假设您熟悉股票图表基础数据绑定

要添加OHLC股票图表组件的图表:

  1. 设置DateField的属性< TelerikStockChart >到模型中携带该值的对应字段。
  2. 添加一个< StockChartSeries >< StockChartSeriesItems >收集。
  3. 设置它类型财产StockChartSeriesType。OHLC
  4. 为其提供数据模型集合数据财产。
  5. 设置OpenField,ClosedField,海菲尔德LowField属性设置为模型中携带值的相应字段。

显示库存偏差的OHLC图

@* OHLC股票图表*@                @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; } } }

OHLC图表特定外观设置

间隙和间距

您可以控制将每个系列的数据点聚在一起的类别之间的距离。要做到这一点,请使用差距级数的性质。它是类别之间的距离,表示为条宽的百分比。

若要设置同一类别中不同系列的柱之间的距离,请使用间距财产。它是一个系列类别中系列项目之间的空间占单个系列项目宽度的比例。

要创建重叠,请设置负值。

的值差距间距对于第一个系列的整个图表,它们适用于所有类别和系列项目。

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

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

  • CategoryAxis
  • ChartArea
  • 传说
  • PlotArea
  • SeriesItems
  • 标题
  • 工具提示
  • ValueAxis
  • XAxes
  • YAxes
  • 和其他人

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

在本文中
Baidu
map