股票图表准星

十字准星是垂直于轴的线，允许用户在当前光标位置上查看点的确切值。

属性的准星类别和/或价值轴:

1. 在< StockChartCategoryAxis >包括< StockChartCategoryAxisCrosshair >，用于< StockChartValueAxis >,包括< StockChartValueAxisCrosshair >标签。
2. 设置它可见参数真正的．
3. (可选)为准星启用工具提示< StockChartCategoryAxisCrosshairTooltip >为类别轴和StockChartValueAxisCrosshairTooltip为价值轴，并设置它可见参数真正的．

@*为StockChart启用十字准星*@    < StockChartCategoryAxisCrosshair可见= " true " > < StockChartCategoryAxisCrosshairTooltip可见= " true " / > < / StockChartCategoryAxisCrosshair > < / StockChartCategoryAxis > < / StockChartCategoryAxes > < StockChartValueAxes > < StockChartValueAxis > < StockChartValueAxisCrosshair可见= " true " > < StockChartValueAxisCrosshairTooltip可见= " true " / > < / StockChartValueAxisCrosshair > < / StockChartValueAxis > < / StockChartValueAxes > < StockChartSeriesItems > < StockChartSeries Type = " StockChartSeriesType。烛台" Name="Product 1" Data="@StockChartProduct1Data" OpenField="@ Name (StockDataPoint.Open)"CloseField = " @nameof (StockDataPoint.Close)”海菲尔德= " @nameof (StockDataPoint.High)”LowField = " @nameof (StockDataPoint.Low)">          @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; } } }

十字准星外观设置

控件的以下属性可以控制十字准星的外观< StockChart * AxisName * AxisCrosshair >：

• 颜色-设置颜色属性设置为有效的CSS颜色。
• 不透明度-设置不透明度准星。
• 宽度-设置宽度准星。

@*使用轴设置来控制十字准星的外观*@     < stockchartcategoryaxiscrosshatip Visible="true" />                     @code {public List StockChartProduct1Data {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) }; 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; } } }

十字线工具提示模板

十字准星工具提示提供<模板>在这里可以控制工具提示的呈现。的上下文提供有关FormattedValue它映射到工具提示的默认呈现，并格式化为字符串。

为价值Axis可以将该值解析为模型中的类型(小数，双等)。

为类别轴的FormattedValue表示类别轴的标签。

@*使用十字准星工具提示模板自定义值*@                               @code { public List StockChartProduct1Data { 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) }; 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; } } }

另请参阅

• 现场演示:股票图表