SxCalendarChart (日历图)
- Implemented
NextUI 扩展图表。专门针对日历热力图场景优化的封装组件。
使用场景
- GitHub 贡献热力图
- 活动日历统计
- 每日数据追踪
- 时间维度数据可视化
约束说明
Options提供时将直接透传到 ECharts。- 未提供
Options时使用Data/Range生成默认配置。 - 日期格式应为
yyyy-MM-dd。
行为说明
- 首次渲染初始化 ECharts 实例。
Disabled为真时不更新图表数据。- 基于日历坐标系的热力图实现。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Data |
object? |
null |
数据源，格式为 [日期, 值] 数组或对象数组。 |
| Implemented | DateField |
string? |
null |
日期字段名（当 Data 为对象数组时）。 |
| Implemented | ValueField |
string? |
null |
值字段名（当 Data 为对象数组时）。 |
| Implemented | Range |
object? |
当前年份 | 日历范围。可以是年份字符串 "2024" 或日期范围 ["2024-01-01", "2024-12-31"]。 |
| Implemented | Min |
double? |
0 |
视觉映射最小值。 |
| Implemented | Max |
double? |
10 |
视觉映射最大值。 |
| Implemented | CellSize |
object? |
["auto", 13] |
单元格大小，可以是数字或 "auto"。 |
| Implemented | ShowYearLabel |
bool |
true |
是否显示年份标签。 |
| Implemented | ShowMonthLabel |
bool |
true |
是否显示月份标签。 |
| Implemented | ShowDayLabel |
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 属性。 |
示例
基础日历图
<SxCalendarChart />
GitHub 风格热力日历
<SxCalendarChart Data="@commitData" Range="2024" Min="0" Max="20" />
@code {
private object[] commitData = new object[]
{
new object[] { "2024-01-01", 5 },
new object[] { "2024-01-02", 10 },
new object[] { "2024-01-03", 3 },
// ... 更多数据
};
}
多年份日历
<SxCalendarChart Range='@(new[] { "2023-01-01", "2024-12-31" })' />
自定义单元格大小
<SxCalendarChart CellSize='@(new object[] { 20, 20 })' />