SxBoxplotChart (箱线图)

  • Implemented

NextUI 扩展图表。专门针对箱线图场景优化的封装组件。

使用场景

  • 数据分布可视化
  • 统计分析展示
  • 异常值检测
  • 多组数据对比

约束说明

  • Options 提供时将直接透传到 ECharts。
  • 未提供 Options 时使用 Data 生成默认配置。
  • 数据格式为 [min, Q1, median, Q3, max] 五元组数组。

行为说明

  • 首次渲染初始化 ECharts 实例。
  • Disabled 为真时不更新图表数据。
  • 支持垂直和水平两种布局方向。

API

Parameters (参数)

状态 参数名 类型 默认值 描述
Implemented Data object? null 数据源，格式为 [min, Q1, median, Q3, max] 数组。
Implemented Categories string[]? null 类别轴标签。
Implemented Horizontal bool false 是否使用水平布局。
Implemented ShowOutliers bool true 是否显示异常值。
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 属性。

示例

基础箱线图

<SxBoxplotChart />

自定义数据

<SxBoxplotChart Data="@boxplotData" Categories="@categories" />

@code {
    // 数据格式: [最小值, 下四分位数, 中位数, 上四分位数, 最大值]
    private double[][] boxplotData = new[]
    {
        new double[] { 850, 940, 960, 980, 1070 },
        new double[] { 960, 1000, 1050, 1090, 1120 },
        new double[] { 880, 940, 990, 1060, 1120 }
    };

    private string[] categories = new[] { "产品A", "产品B", "产品C" };
}

水平箱线图

<SxBoxplotChart Horizontal="true" />

参考设计 (References)

在 Playground 中打开 →