Back to Details

syncfusion-flutter-spark-charts

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Syncfusion Flutter Spark Charts

Syncfusion Flutter Spark Charts

This skill covers the Syncfusion Flutter Spark Charts (also known as Micro Charts) - lightweight, condensed chart widgets designed to show data trends in a simple, compact format without axes or coordinates. The package includes four chart types: SfSparkLineChart, SfSparkAreaChart, SfSparkBarChart, and SfSparkWinLossChart.
本教程介绍Syncfusion Flutter Spark Charts（也叫微型图表）：这是一类轻量精简的图表组件，旨在以无坐标轴的简单紧凑格式展示数据趋势。该包包含四种图表类型：SfSparkLineChart、SfSparkAreaChart、SfSparkBarChart和SfSparkWinLossChart。

When to Use This Skill

什么时候使用本教程

Use this skill when you need to:
  • Display compact data visualizations without complex chart elements
  • Show trends and patterns in a minimal, condensed format
  • Add inline charts to tables, cards, or dashboards
  • Visualize KPIs and performance indicators efficiently
  • Create lightweight visualizations where space is limited
  • Build dashboard widgets with quick data insights
  • Implement micro charts for mobile or web interfaces
  • Display data summaries without overwhelming detail
  • Show win-loss scenarios or binary outcomes
  • Add sparklines to data grids or list items
当你需要完成以下需求时可以参考本教程：
  • 无需复杂图表元素，展示紧凑的数据可视化效果
  • 以极简精简的格式展示趋势和规律
  • 为表格、卡片或仪表板添加内嵌图表
  • 高效可视化KPI和性能指标
  • 在空间有限的场景下创建轻量可视化组件
  • 开发可快速展示数据洞察的仪表板组件
  • 为移动端或Web界面实现微型图表
  • 无需过多细节，展示数据汇总
  • 展示胜负场景或二元结果
  • 为数据网格或列表项添加迷你图

Choosing the Right Chart Type

选择合适的图表类型

Use SfSparkLineChart when:

以下场景使用 SfSparkLineChart：

  • You need to identify patterns and trends over time
  • Showing continuous data flow or sequences
  • Displaying seasonal effects or changes over a period
  • Line trends are the most appropriate visualization
  • Building: stock price trends, temperature changes, sales trends, performance metrics
  • 需要识别随时间变化的规律和趋势
  • 展示连续数据流或序列
  • 展示周期效应或一段时间内的变化
  • 折线趋势是最合适的可视化方式
  • 适用场景：股价趋势、温度变化、销售趋势、性能指标

Use SfSparkAreaChart when:

以下场景使用 SfSparkAreaChart：

  • You want to emphasize magnitude of changes
  • Cumulative values need to be highlighted
  • The volume of change is more important than individual points
  • You need to fill the area under the trend line
  • Building: volume indicators, cumulative metrics, filled trend displays
  • 想要强调变化的幅度
  • 需要突出累计数值
  • 变化的量级比单个数据点更重要
  • 需要填充趋势线下方的区域
  • 适用场景：成交量指标、累计指标、填充趋势展示

Use SfSparkBarChart when:

以下场景使用 SfSparkBarChart：

  • Discrete values or individual data points are important
  • Comparing values across categories
  • Column/bar representation is more intuitive
  • Data is categorical or segmented
  • Building: monthly comparisons, category-wise data, discrete measurements
  • 离散值或单个数据点很重要
  • 需要跨类别对比数值
  • 柱/条表示形式更直观
  • 数据是分类或分段的
  • 适用场景：月度对比、分类维度数据、离散测量值

Use SfSparkWinLossChart when:

以下场景使用 SfSparkWinLossChart：

  • Showing binary outcomes (positive/negative, win/loss)
  • Performance indicators with success/failure states
  • Win-loss records or game results
  • Binary status over time periods
  • Building: win-loss records, success metrics, binary performance indicators, tie scenarios
  • 展示二元结果（正向/负向、胜利/失败）
  • 带有成功/失败状态的性能指标
  • 胜负记录或比赛结果
  • 不同时间段的二元状态
  • 适用场景：胜负记录、成功指标、二元性能指标、平局场景

Key Differences Summary:

核心差异汇总：

FeatureSfSparkLineChartSfSparkAreaChartSfSparkBarChartSfSparkWinLossChart
Primary PurposeTrend linesMagnitude emphasisDiscrete comparisonsBinary outcomes
VisualizationLineFilled areaVertical barsWin/Loss bars
Marker Support✅ Yes✅ Yes❌ No❌ No
Best ForContinuous trendsCumulative dataCategorical dataBinary data
Data Label✅ Yes✅ Yes✅ Yes❌ No
Border StyleLine onlyArea + BorderBar + BorderBar + Border
Special PointsHigh, low, first, last, negativeHigh, low, first, last, negativeHigh, low, first, last, negativeHigh, low, first, last, tie
Dashed Style✅ Yes❌ No❌ No❌ No
功能SfSparkLineChartSfSparkAreaChartSfSparkBarChartSfSparkWinLossChart
核心用途趋势线幅度强调离散对比二元结果
可视化形式折线填充区域垂直柱胜负柱
支持标记✅ 是✅ 是❌ 否❌ 否
最适用场景连续趋势累计数据分类数据二元数据
支持数据标签✅ 是✅ 是✅ 是❌ 否
边框样式仅折线区域+边框柱+边框柱+边框
特殊点位最高、最低、首个、末尾、负向最高、最低、首个、末尾、负向最高、最低、首个、末尾、负向最高、最低、首个、末尾、平局
支持虚线样式✅ 是❌ 否❌ 否❌ 否

Documentation and Navigation Guide

文档和导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
  • Installation and package setup
  • Basic implementation for all chart types
  • Adding dependencies and imports
  • Binding data sources
  • First examples and quick starts
📄 阅读： references/getting-started.md
  • 安装和包设置
  • 所有图表类型的基础实现
  • 添加依赖和导入
  • 绑定数据源
  • 首个示例和快速上手

Chart Overview

图表概览

📄 Read: references/overview.md
  • Spark Charts widget overview and features
  • When to use Spark Charts vs full charts
  • Four chart types explained
  • Key features and capabilities
  • Lightweight visualization benefits
📄 阅读： references/overview.md
  • Spark Charts组件概览和功能
  • 什么时候用Spark Charts而不是全量图表
  • 四种图表类型详解
  • 核心功能和能力
  • 轻量可视化的优势

Chart Types

图表类型

📄 Read: references/chart-types.md
  • Line chart (SfSparkLineChart)
  • Area chart (SfSparkAreaChart)
  • Bar chart (SfSparkBarChart)
  • WinLoss chart (SfSparkWinLossChart)
  • Chart type comparison and selection
  • Type-specific properties and customization
  • Dashed line support for line charts
📄 阅读： references/chart-types.md
  • 折线图 (SfSparkLineChart)
  • 面积图 (SfSparkAreaChart)
  • 柱形图 (SfSparkBarChart)
  • 胜负图 (SfSparkWinLossChart)
  • 图表类型对比和选择
  • 类型专属属性和自定义
  • 折线图的虚线支持

Axis Configuration

坐标轴配置

📄 Read: references/axis-types.md
  • Numeric axis
  • Date-time axis
  • Category axis
  • Custom data source binding
  • Axis line customization
  • Axis crossing positions
  • Axis styling (color, width, dash array)
📄 阅读： references/axis-types.md
  • 数值轴
  • 日期时间轴
  • 分类轴
  • 自定义数据源绑定
  • 轴线自定义
  • 轴交叉位置
  • 轴样式（颜色、宽度、虚线数组）

Data Binding

数据绑定

📄 Read: references/data-binding.md
  • Simple data binding with List<double>
  • Custom data source with xValueMapper and yValueMapper
  • Numeric, date-time, and category x-axis values
  • Data mapping patterns
  • Using .custom() constructors
📄 阅读： references/data-binding.md
  • 使用List<double>实现简单数据绑定
  • 通过xValueMapper和yValueMapper绑定自定义数据源
  • 数值、日期时间、分类x轴值
  • 数据映射模式
  • 使用.custom()构造函数

Markers and Data Labels

标记和数据标签

📄 Read: references/markers-datalabels.md
  • Marker configuration (line and area charts only)
  • Marker shapes (circle, diamond, square, triangle, inverted triangle)
  • Marker display modes (all, high, low, first, last, none)
  • Marker customization (color, border, size)
  • Data label display modes
  • Data label styling
📄 阅读： references/markers-datalabels.md
  • 标记配置（仅折线和面积图支持）
  • 标记形状（圆形、菱形、方形、三角形、倒三角形）
  • 标记展示模式（全部、最高、最低、首个、末尾、不展示）
  • 标记自定义（颜色、边框、尺寸）
  • 数据标签展示模式
  • 数据标签样式

Trackball

轨迹球

📄 Read: references/trackball.md
  • Enabling trackball for interaction
  • Trackball activation modes (tap, longPress, doubleTap)
  • Trackball customization (color, border, background)
  • Trackball label styling
  • Touch interaction patterns
📄 阅读： references/trackball.md
  • 开启交互轨迹球
  • 轨迹球激活模式（点击、长按、双击）
  • 轨迹球自定义（颜色、边框、背景）
  • 轨迹球标签样式
  • 触摸交互模式

Plot Bands

绘图带

📄 Read: references/plotband.md
  • Highlighting specific Y-axis ranges
  • Plot band start and end values
  • Plot band styling (color, border)
  • Use cases for plot bands
📄 阅读： references/plotband.md
  • 高亮指定Y轴范围
  • 绘图带起始和结束值
  • 绘图带样式（颜色、边框）
  • 绘图带使用场景

Customization and Styling

自定义和样式

📄 Read: references/customization.md
  • Chart color customization
  • Special point colors (high, low, first, last, negative, tie)
  • Border styling (width, color)
  • Line width customization
  • Chart inversion
  • Visual appearance patterns
📄 阅读： references/customization.md
  • 图表颜色自定义
  • 特殊点位颜色（最高、最低、首个、末尾、负向、平局）
  • 边框样式（宽度、颜色）
  • 折线宽度自定义
  • 图表翻转
  • 视觉外观模式

Accessibility

无障碍适配

📄 Read: references/accessibility.md
  • Sufficient contrast for charts
  • Theme support and customization
  • Large font support
  • Text scaling with MediaQueryData
  • Color customization for accessibility
📄 阅读： references/accessibility.md
  • 图表充足对比度
  • 主题支持和自定义
  • 大字体支持
  • 随MediaQueryData文本缩放
  • 无障碍颜色自定义

Quick Start Examples

快速上手示例

Basic Line Chart

基础折线图

dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

class MySparkLineChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Spark Line Chart')),
      body: Center(
        child: Container(
          height: 100,
          padding: EdgeInsets.all(16),
          child: SfSparkLineChart(
            data: <double>[
              5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8
            ],
          ),
        ),
      ),
    );
  }
}
dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

class MySparkLineChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Spark Line Chart')),
      body: Center(
        child: Container(
          height: 100,
          padding: EdgeInsets.all(16),
          child: SfSparkLineChart(
            data: <double>[
              5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8
            ],
          ),
        ),
      ),
    );
  }
}

Bar Chart with Special Points

带特殊点位的柱形图

dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

class SparkBarWithColors extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SfSparkBarChart(
      data: <double>[
        10, 6, 8, -5, 11, 5, -2, 7, -3, 6, 8, 10
      ],
      highPointColor: Colors.red,
      lowPointColor: Colors.green,
      firstPointColor: Colors.orange,
      lastPointColor: Colors.orange,
      negativePointColor: Colors.purple,
    );
  }
}
dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

class SparkBarWithColors extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SfSparkBarChart(
      data: <double>[
        10, 6, 8, -5, 11, 5, -2, 7, -3, 6, 8, 10
      ],
      highPointColor: Colors.red,
      lowPointColor: Colors.green,
      firstPointColor: Colors.orange,
      lastPointColor: Colors.orange,
      negativePointColor: Colors.purple,
    );
  }
}

WinLoss Chart

胜负图

dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

class SparkWinLossChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SfSparkWinLossChart(
      data: <double>[
        12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10
      ],
      color: Colors.blue,
      negativePointColor: Colors.red,
      tiePointColor: Colors.grey,
    );
  }
}
dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

class SparkWinLossChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SfSparkWinLossChart(
      data: <double>[
        12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10
      ],
      color: Colors.blue,
      negativePointColor: Colors.red,
      tiePointColor: Colors.grey,
    );
  }
}

Chart with Trackball

带轨迹球的图表

dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

class SparkLineWithTrackball extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SfSparkLineChart(
      axisLineWidth: 0,
      trackball: SparkChartTrackball(
        backgroundColor: Colors.blue.withOpacity(0.8),
        borderColor: Colors.blue.withOpacity(0.8),
        borderWidth: 2,
        color: Colors.blue,
        labelStyle: TextStyle(color: Colors.white),
        activationMode: SparkChartActivationMode.tap,
      ),
      marker: SparkChartMarker(
        displayMode: SparkChartMarkerDisplayMode.all,
      ),
      data: <double>[
        5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8
      ],
    );
  }
}
dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

class SparkLineWithTrackball extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SfSparkLineChart(
      axisLineWidth: 0,
      trackball: SparkChartTrackball(
        backgroundColor: Colors.blue.withOpacity(0.8),
        borderColor: Colors.blue.withOpacity(0.8),
        borderWidth: 2,
        color: Colors.blue,
        labelStyle: TextStyle(color: Colors.white),
        activationMode: SparkChartActivationMode.tap,
      ),
      marker: SparkChartMarker(
        displayMode: SparkChartMarkerDisplayMode.all,
      ),
      data: <double>[
        5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8
      ],
    );
  }
}

Common Patterns

常用模式

Pattern 1: Dashboard KPI Widget

模式1：仪表板KPI组件

dart
// Compact KPI card with sparkline
class KPICard extends StatelessWidget {
  final String title;
  final String value;
  final List<double> trendData;
  final Color trendColor;

  const KPICard({
    required this.title,
    required this.value,
    required this.trendData,
    this.trendColor = Colors.blue,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: TextStyle(fontSize: 14, color: Colors.grey)),
            SizedBox(height: 8),
            Text(value, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
            SizedBox(height: 12),
            Container(
              height: 50,
              child: SfSparkLineChart(
                axisLineWidth: 0,
                data: trendData,
                color: trendColor,
                width: 2,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
dart
// 带迷你图的紧凑KPI卡片
class KPICard extends StatelessWidget {
  final String title;
  final String value;
  final List<double> trendData;
  final Color trendColor;

  const KPICard({
    required this.title,
    required this.value,
    required this.trendData,
    this.trendColor = Colors.blue,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: TextStyle(fontSize: 14, color: Colors.grey)),
            SizedBox(height: 8),
            Text(value, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
            SizedBox(height: 12),
            Container(
              height: 50,
              child: SfSparkLineChart(
                axisLineWidth: 0,
                data: trendData,
                color: trendColor,
                width: 2,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Pattern 2: Data Table with Inline Sparklines

模式2：带内嵌迷你图的数据表格

dart
// Table row with sparkline trend
class DataRowWithSparkline extends StatelessWidget {
  final String label;
  final List<double> data;

  const DataRowWithSparkline({
    required this.label,
    required this.data,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 2,
          child: Text(label),
        ),
        Expanded(
          flex: 3,
          child: Container(
            height: 30,
            child: SfSparkLineChart(
              axisLineWidth: 0,
              data: data,
              highPointColor: Colors.green,
              lowPointColor: Colors.red,
            ),
          ),
        ),
      ],
    );
  }
}
dart
// 带迷你图趋势的表格行
class DataRowWithSparkline extends StatelessWidget {
  final String label;
  final List<double> data;

  const DataRowWithSparkline({
    required this.label,
    required this.data,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 2,
          child: Text(label),
        ),
        Expanded(
          flex: 3,
          child: Container(
            height: 30,
            child: SfSparkLineChart(
              axisLineWidth: 0,
              data: data,
              highPointColor: Colors.green,
              lowPointColor: Colors.red,
            ),
          ),
        ),
      ],
    );
  }
}

Pattern 3: Win-Loss Record Display

模式3：胜负记录展示

dart
// Display win-loss record with chart
class WinLossRecord extends StatelessWidget {
  final List<double> results; // 1 for win, -1 for loss, 0 for tie

  const WinLossRecord({required this.results});

  @override
  Widget build(BuildContext context) {
    int wins = results.where((r) => r > 0).length;
    int losses = results.where((r) => r < 0).length;
    int ties = results.where((r) => r == 0).length;

    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text('W: $wins', style: TextStyle(color: Colors.green)),
            Text('L: $losses', style: TextStyle(color: Colors.red)),
            Text('T: $ties', style: TextStyle(color: Colors.grey)),
          ],
        ),
        SizedBox(height: 8),
        Container(
          height: 40,
          child: SfSparkWinLossChart(
            data: results,
            color: Colors.green,
            negativePointColor: Colors.red,
            tiePointColor: Colors.grey,
          ),
        ),
      ],
    );
  }
}
dart
// 用图表展示胜负记录
class WinLossRecord extends StatelessWidget {
  final List<double> results; // 1代表胜利，-1代表失败，0代表平局

  const WinLossRecord({required this.results});

  @override
  Widget build(BuildContext context) {
    int wins = results.where((r) => r > 0).length;
    int losses = results.where((r) => r < 0).length;
    int ties = results.where((r) => r == 0).length;

    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text('胜: $wins', style: TextStyle(color: Colors.green)),
            Text('负: $losses', style: TextStyle(color: Colors.red)),
            Text('平: $ties', style: TextStyle(color: Colors.grey)),
          ],
        ),
        SizedBox(height: 8),
        Container(
          height: 40,
          child: SfSparkWinLossChart(
            data: results,
            color: Colors.green,
            negativePointColor: Colors.red,
            tiePointColor: Colors.grey,
          ),
        ),
      ],
    );
  }
}

Pattern 4: Chart with Plot Band Threshold

模式4：带绘图带阈值的图表

dart
// Highlight threshold zones with plot band
class ThresholdSparkLine extends StatelessWidget {
  final List<double> data;
  final double thresholdMin;
  final double thresholdMax;

  const ThresholdSparkLine({
    required this.data,
    this.thresholdMin = 5.0,
    this.thresholdMax = 10.0,
  });

  @override
  Widget build(BuildContext context) {
    return SfSparkLineChart(
      axisLineWidth: 1,
      axisLineColor: Colors.grey[300],
      data: data,
      color: Colors.blue,
      plotBand: SparkChartPlotBand(
        start: thresholdMin,
        end: thresholdMax,
        color: Colors.green.withOpacity(0.2),
        borderColor: Colors.green,
        borderWidth: 1,
      ),
    );
  }
}
dart
// 用绘图带高亮阈值区间
class ThresholdSparkLine extends StatelessWidget {
  final List<double> data;
  final double thresholdMin;
  final double thresholdMax;

  const ThresholdSparkLine({
    required this.data,
    this.thresholdMin = 5.0,
    this.thresholdMax = 10.0,
  });

  @override
  Widget build(BuildContext context) {
    return SfSparkLineChart(
      axisLineWidth: 1,
      axisLineColor: Colors.grey[300],
      data: data,
      color: Colors.blue,
      plotBand: SparkChartPlotBand(
        start: thresholdMin,
        end: thresholdMax,
        color: Colors.green.withOpacity(0.2),
        borderColor: Colors.green,
        borderWidth: 1,
      ),
    );
  }
}

Key Properties

核心属性

Essential Properties (All Chart Types)

基础属性（所有图表类型通用）

Data & Display:
  • data
    - List of data values (List<double>)
  • color
    - Primary color of the chart
  • axisLineWidth
    - Axis line width (set to 0 to hide)
  • isInversed
    - Inverts chart vertically
Special Point Colors:
  • highPointColor
    , 
    lowPointColor
    , 
    firstPointColor
    , 
    lastPointColor
  • negativePointColor
    - For negative values
  • tiePointColor
    - For zero values (Win-Loss only)
Interactive Features:
  • marker
    - Marker configuration (Line/Area only)
  • trackball
    - Interactive tooltip configuration
  • plotBand
    - Highlight Y-axis ranges
Line Chart Specific:
  • width
    - Line thickness
  • dashArray
    - Dashed line pattern [5, 3]
Area/Bar/Win-Loss Specific:
  • borderColor
    , 
    borderWidth
    - Chart borders
Data Labels:
  • labelDisplayMode
    - Display mode (all, high, low, first, last, none)
  • labelStyle
    - Text style configuration
Custom Data Binding:
  • Use 
    .custom()
    constructor with 
    dataCount
    , 
    xValueMapper
    , 
    yValueMapper
📄 For detailed properties: See references/customization.md
数据与展示：
  • data
    - 数据值列表 (List<double>)
  • color
    - 图表主色
  • axisLineWidth
    - 轴线宽度（设为0可隐藏）
  • isInversed
    - 垂直翻转图表
特殊点位颜色：
  • highPointColor
    、
    lowPointColor
    、
    firstPointColor
    、
    lastPointColor
  • negativePointColor
    - 负向值颜色
  • tiePointColor
    - 零值颜色（仅胜负图支持）
交互功能：
  • marker
    - 标记配置（仅折线/面积图支持）
  • trackball
    - 交互提示框配置
  • plotBand
    - 高亮Y轴范围
折线图专属：
  • width
    - 折线粗细
  • dashArray
    - 虚线模式 [5, 3]
面积/柱形/胜负图专属：
  • borderColor
    、
    borderWidth
    - 图表边框
数据标签：
  • labelDisplayMode
    - 展示模式（全部、最高、最低、首个、末尾、不展示）
  • labelStyle
    - 文本样式配置
自定义数据绑定：
  • 使用
    .custom()
    构造函数，搭配
    dataCount
    、
    xValueMapper
    、
    yValueMapper
    使用
📄 查看详细属性： 参考 references/customization.md

Common Use Cases

常见使用场景

  1. Dashboard KPIs - Use SfSparkLineChart for compact trend indicators
  2. Data Grid Trends - Use any chart type inline with table data
  3. Performance Metrics - Use SfSparkLineChart with special point colors
  4. Win-Loss Records - Use SfSparkWinLossChart for game/competition results
  5. Stock Price Indicators - Use SfSparkLineChart with markers
  6. Sales Trends - Use SfSparkAreaChart to emphasize volume
  7. Monthly Comparisons - Use SfSparkBarChart for discrete periods
  8. Threshold Monitoring - Use plot bands to highlight critical ranges
  9. Mobile Dashboards - Use compact sparklines for space-limited UIs
  10. Report Summaries - Use sparklines for quick data overviews
  1. 仪表板KPI - 使用SfSparkLineChart开发紧凑趋势指标
  2. 数据网格趋势 - 任意图表类型可内嵌在表格数据中
  3. 性能指标 - 使用带特殊点位颜色的SfSparkLineChart
  4. 胜负记录 - 使用SfSparkWinLossChart展示比赛/竞赛结果
  5. 股价指标 - 使用带标记的SfSparkLineChart
  6. 销售趋势 - 使用SfSparkAreaChart突出量级
  7. 月度对比 - 使用SfSparkBarChart展示离散周期数据
  8. 阈值监控 - 使用绘图带高亮关键区间
  9. 移动端仪表板 - 在空间有限的UI中使用紧凑迷你图
  10. 报告汇总 - 使用迷你图快速展示数据概览