SxCandlestickChart (K线图)

  • Implemented

NextUI 扩展图表。专门针对 K 线图（蜡烛图）场景优化的封装组件。

使用场景

  • 股票价格走势
  • 金融数据可视化
  • OHLC 数据展示
  • 技术分析图表

约束说明

  • Options 提供时将直接透传到 ECharts。
  • 未提供 Options 时使用 Data 生成默认配置。
  • 数据格式为 [open, close, lowest, highest] 或对象数组。

行为说明

  • 首次渲染初始化 ECharts 实例。
  • Disabled 为真时不更新图表数据。
  • 支持与其他指标（如均线）叠加显示。

API

Parameters (参数)

状态 参数名 类型 默认值 描述
Implemented Data object? null 数据源，格式为 [open, close, lowest, highest] 数组。
Implemented OpenField string? null 开盘价字段名。
Implemented CloseField string? null 收盘价字段名。
Implemented LowestField string? null 最低价字段名。
Implemented HighestField string? null 最高价字段名。
Implemented DateField string? null 日期字段名。
Implemented Dates string[]? null X 轴日期标签。
Implemented ShowDataZoom bool false 是否显示数据区域缩放组件。
Implemented SeriesName string? null 系列名称，用于图例显示。
Implemented Options (继承) object? null 覆盖 ECharts 配置。
Implemented Disabled (继承) bool false 禁用状态。
Implemented Id (继承) string? null 组件的物理 Id。
Implemented Class (继承) string? null 自定义 CSS 类名。
Implemented Style (继承) string? null 自定义样式。
Implemented Title (继承) string? null HTML title 属性。
Implemented AdditionalAttributes (继承) IEnumerable<KeyValuePair<string, object>>? null 捕获不匹配的 HTML 属性。

示例

基础 K 线图

<SxCandlestickChart />

自定义数据

<SxCandlestickChart Data="@klineData" Dates="@dates" />

@code {
    // 数据格式: [开盘价, 收盘价, 最低价, 最高价]
    private double[][] klineData = new[]
    {
        new double[] { 20, 34, 10, 38 },
        new double[] { 40, 35, 30, 50 },
        new double[] { 31, 38, 33, 44 },
        new double[] { 38, 15, 5, 42 }
    };

    private string[] dates = new[] { "2024-01-01", "2024-01-02", "2024-01-03", "2024-01-04" };
}

带数据缩放

<SxCandlestickChart Data="@data" ShowDataZoom="true" />

参考设计 (References)

在 Playground 中打开 →