syncfusion-flutter-cartesian-charts

实现 Syncfusion Flutter 笛卡尔图表

SfCartesianChart 是 syncfusion_flutter_charts 软件包中的高性能 Flutter 组件，支持在笛卡尔（X/Y）坐标上绘制 30 多种图表类型。它可处理实时数据，提供丰富的交互功能和深度自定义选项。

何时使用此技能

在以下情况下使用此技能：

• 在 Flutter 中渲染任意折线图、面积图、柱状图、条形图、样条图、散点图或金融图表
• 配置坐标轴类型（数值、类别、日期时间、对数）
• 添加缩放、平移、工具提示、跟踪球或十字准线交互
• 自定义系列外观（颜色、渐变、标记、数据标签）
• 添加注释、技术指标或趋势线
• 导出图表或响应图表回调
• 支持 RTL、本地化或无障碍功能

组件概览

SfCartesianChart 组件是一套完整的图表解决方案，可使用笛卡尔（X/Y）坐标显示数据。它支持多个类别中的 30 多种图表类型：

• 折线图：折线图、快速折线图、样条图（多种张力类型）、阶梯折线图
• 面积图：面积图、样条面积图、阶梯面积图、范围面积图、样条范围面积图、堆积面积图（包括 100% 堆积）
• 柱状图/条形图：柱状图、条形图、范围柱状图、堆积柱状图/条形图（包括 100% 堆积）
• 散点图/气泡图：散点图、气泡图
• 金融图表：蜡烛图、OHLC、HiLo、HiLoOpenClose，并支持技术指标
• 统计图表：直方图、箱线图、误差棒图
• 瀑布图：用于可视化累积效果

该组件提供五种坐标轴类型（Numeric、Category、DateTime、DateTimeCategory、Logarithmic）、交互功能（缩放、平移、工具提示、跟踪球、十字准线）、选择行为、丰富的自定义选项（标记、数据标签、渐变、动画）、技术指标（SMA、EMA、MACD、RSI、布林带等）、趋势线、注释和图表导出功能。

---

快速开始

# Always installs the latest compatible version automatically
flutter pub add syncfusion_flutter_charts

始终通过终端安装软件包——不要直接编辑 pubspec.yaml。 在 Flutter 项目根目录运行此命令，并等待其成功完成后再继续。

import 'package:syncfusion_flutter_charts/charts.dart';

class MyChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 300,
      child: SfCartesianChart(
        primaryXAxis: CategoryAxis(),
        title: ChartTitle(text: 'Monthly Sales'),
        legend: Legend(isVisible: true),
        tooltipBehavior: TooltipBehavior(enable: true),
        series: <CartesianSeries>[
          LineSeries<ChartData, String>(
            dataSource: [
              ChartData('Jan', 35),
              ChartData('Feb', 28),
              ChartData('Mar', 34),
              ChartData('Apr', 32),
              ChartData('May', 40),
            ],
            xValueMapper: (ChartData d, _) => d.x,
            yValueMapper: (ChartData d, _) => d.y,
            name: 'Sales',
            dataLabelSettings: DataLabelSettings(isVisible: true),
          ),
        ],
      ),
    );
  }
}

class ChartData {
  ChartData(this.x, this.y);
  final String x;
  final double? y;
}

---

导航指南

入门

📄 阅读： references/getting-started.md

• 安装并导入软件包
• 初始化 SfCartesianChart
• 绑定数据源和数据模型
• 添加标题、数据标签、图例和工具提示
• 完整的最简可运行示例

折线图、面积图和样条图类型

📄 阅读： references/chart-types-line-area.md

• 折线图、快速折线图、样条图（含样条类型）
• 阶梯折线图、面积图、样条面积图
• 阶梯面积图、范围面积图、样条范围面积图
• 各类型的适用场景

柱状图、条形图及其他笛卡尔图表类型

📄 阅读： references/chart-types-column-bar.md

• 柱状图、条形图、范围柱状图
• 气泡图、散点图、直方图
• 瀑布图、误差棒图、箱线图
• 各类型的关键配置

堆积图表类型

📄 阅读： references/chart-types-stacked.md

• 堆积面积图/条形图/柱状图/折线图
• 100% 堆积图表变体
• 何时选择堆积图表或 100% 堆积图表

金融图表类型

📄 阅读： references/chart-types-financial.md

• 蜡烛图、HILO、OHLC 图表
• 金融数据模型（open/high/low/close 映射器）
• 空心蜡烛和实心蜡烛

坐标轴类型

📄 阅读： references/axis-types.md

• NumericAxis、CategoryAxis、DateTimeAxis
• DateTimeCategoryAxis、LogarithmicAxis
• 为数据选择合适的坐标轴

坐标轴自定义

📄 阅读： references/axis-customization.md

• 标题、标签、标签格式
• 网格线、刻度线、范围（最小值/最大值/间隔）
• 条带线、多级标签
• 次坐标轴、坐标轴交叉、反向坐标轴

系列自定义

📄 阅读： references/series-customization.md

• 颜色、边框、不透明度、渐变填充
• 虚线数组、宽度、点颜色映射器
• 动画、调色板颜色、空数据点设置

图例

📄 阅读： references/legend.md

• 启用图例并设置位置
• 通过图例切换系列可见性
• 溢出模式（换行、滚动）
• 自定义图例项和图标

工具提示、追踪球与十字准线

📄 阅读： references/tooltip-trackball.md

• TooltipBehavior — 启用、格式化、自定义模板
• 跨系列共享工具提示
• TrackballBehavior — 显示模式
• CrosshairBehavior 配置

缩放、平移与选择

📄 阅读： references/zoom-pan-selection.md

• ZoomPanBehavior — 捏合、鼠标滚轮、方向性缩放
• ZoomMode（x、y、xy）、平移
• 实时数据自动滚动
• SelectionBehavior — 点、系列、簇、框选

注释、标记与数据标签

📄 阅读： references/annotations-markers-datalabels.md

• CartesianChartAnnotation — 文本和组件叠加层
• 坐标单位（点、像素或百分比）
• MarkerSettings — 形状、大小、颜色
• DataLabelSettings — 位置、格式、模板、连接线

技术指标与趋势线

📄 阅读： references/technical-indicators-trendlines.md

• SMA、EMA、TMA、WMA、MACD、RSI、Stochastic
• 布林带、ATR、CCI、Momentum、AD、ROC
• 趋势线类型（线性、指数、多项式、移动平均、幂函数、对数）
• 预测周期

图表外观与多个图表

📄 阅读： references/chart-appearance.md

• 背景颜色/图像、绘图区自定义
• 调色板、主题集成
• 在同一屏幕上渲染多个图表
• 按需/延迟加载数据

回调、方法、导出与无障碍

📄 阅读： references/callbacks-methods-export.md

• 关键回调（onTooltipRender、onDataLabelRender、onZooming 等）
• ChartSeriesController 方法（updateDataSource、animate）
• 导出为 PNG、PDF、JPEG
• 本地化、RTL、无障碍

---

常见模式

模式 1 — 实时数据更新

late ChartSeriesController _controller;

onRendererCreated: (ChartSeriesController controller) {
  _controller = controller;
},

void addDataPoint(ChartData newPoint) {
  chartData.add(newPoint);
  _controller.updateDataSource(
    addedDataIndexes: [chartData.length - 1],
  );
}

模式 2 — 在一个图表上显示多个系列

series: <CartesianSeries>[
  LineSeries<ChartData, String>(
    dataSource: data,
    xValueMapper: (d, _) => d.x,
    yValueMapper: (d, _) => d.y1,
    name: 'Revenue',
  ),
  ColumnSeries<ChartData, String>(
    dataSource: data,
    xValueMapper: (d, _) => d.x,
    yValueMapper: (d, _) => d.y2,
    name: 'Cost',
  ),
]

模式 3 — 同时使用缩放和工具提示

late ZoomPanBehavior _zoom;
late TooltipBehavior _tooltip;

@override
void initState() {
  _zoom = ZoomPanBehavior(enablePinching: true, enableDoubleTapZooming: true);
  _tooltip = TooltipBehavior(enable: true);
  super.initState();
}

zoomPanBehavior: _zoom,
tooltipBehavior: _tooltip,

---

关键组件属性

属性	类型	用途
primaryXAxis	ChartAxis	水平轴类型和配置
primaryYAxis	ChartAxis	垂直轴类型和配置
series	List<CartesianSeries>	一个或多个数据系列
title	ChartTitle	图表标题文本
legend	Legend	图例可见性和位置
tooltipBehavior	TooltipBehavior	点击时显示工具提示
zoomPanBehavior	ZoomPanBehavior	缩放和平移交互
selectionType	SelectionType	点/系列/簇选择
annotations	List<CartesianChartAnnotation>	叠加组件/文本
indicators	List<TechnicalIndicator>	技术分析叠加层
onTooltipRender	ChartTooltipCallback	自定义工具提示文本
onZooming	ChartZoomingCallback	响应缩放事件
palette	List<Color>	自定义系列颜色调色板