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

烛台图表

烛台图表显示金融单位价格变动的数据。它由一个条(蜡烛)组成,代表打开和关闭的值,以及竖线(烛台),表示最高和最低的值。

本文假设您熟悉图基础而且数据绑定

创建烛台图:

  1. 添加一个ChartSeriesChartSeriesItems集合
  2. 设置它类型财产ChartSeriesType。烛台
  3. 为其提供数据集合数据属性,并设置相应的字段:
    • CategoryField-将与x轴匹配的日期
    • OpenField-具有Open值的字段
    • CloseField-具有Close值的字段
    • 海菲尔德-值为High的字段
    • LowField-值为Low的字段
  4. 设x轴为a时间轴-虽然烛台图可以处理简单的字符串类别,但它的设计目的是显示一段时间的财务数据

显示产品金融库存数据的烛台图

@*烛台图表*@                @code {List ChartProduct1Data {get;设置;} protected override async Task OnInitializedAsync() {await GenerateChartData();}异步任务GenerateChartData () {ChartProduct1Data =新列表< StockDataPoint >(){新StockDataPoint(新DateTime(2019、1、1),39.88米,40.12米,41.12米,39.75米,3584700),/ /关闭低于打开,所以颜色使用,详细信息,请参阅本文后面新StockDataPoint(新DateTime(2019、2、1),41.62米,40.12米,41.69米,39.81米,2632000),新StockDataPoint(新DateTime(2019 3 1), 42米,42.62米,43.31米,41.38米,7631700),新StockDataPoint(新DateTime(2019 4 1), 42.25米, 43.06m, 43.31m, 41.12m, 4922200), }; await Task.FromResult(ChartProduct1Data); } 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; } } }

烛台图特定外观设置

DownColor

设置该系列的颜色-有效的CSS、RGB、RGBA颜色OpenField大于CloseField通过设置DownColor的属性ChartSeries.数据可以通过数据模型传递,并绑定到DownColorField

色域

柱状图、OHLC图和烛台图可以采用系列项目的颜色ColorField数据源的。您可以传递一个有效的CSS颜色(例如,#六边形abcdef# f00,或蓝色的).

绑定到的值DownColorField而且ColorField将优先于传递给颜色DownColor属性。

间隙和间距

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

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

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

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

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

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

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

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

另请参阅

在本文中
Baidu
map