Flutter如何绘制K线图

在Flutter中如何实现K线图的绘制？需要支持实时更新数据和交互功能，比如缩放和滑动查看历史数据。目前尝试了CustomPaint和第三方库，但效果不太理想，求推荐可靠的实现方案或详细教程。

2 回复

使用CustomPaint自定义绘制K线图。定义CustomPainter子类，在paint方法中绘制坐标轴、K线实体和影线。通过Path和Canvas绘制矩形和线条，根据数据计算位置和颜色。

更多关于Flutter如何绘制K线图的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中绘制K线图，可以通过以下几种方式实现：

1. 使用自定义绘制（CustomPaint）

class KLineChart extends CustomPainter {
  final List<KLineData> data;
  
  KLineChart(this.data);
  
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke;
    
    // 绘制坐标轴
    canvas.drawLine(Offset(0, 0), Offset(size.width, 0), paint);
    canvas.drawLine(Offset(0, 0), Offset(0, size.height), paint);
    
    // 绘制K线
    for (int i = 0; i < data.length; i++) {
      _drawKLine(canvas, data[i], i, size);
    }
  }
  
  void _drawKLine(Canvas canvas, KLineData kline, int index, Size size) {
    final width = size.width / data.length * 0.6;
    final x = index * (size.width / data.length) + width / 2;
    
    // 计算价格坐标（需要根据价格范围映射到画布高度）
    final highY = _priceToY(kline.high, size);
    final lowY = _priceToY(kline.low, size);
    final openY = _priceToY(kline.open, size);
    final closeY = _priceToY(kline.close, size);
    
    // 绘制上下影线
    final shadowPaint = Paint()
      ..color = Colors.grey
      ..strokeWidth = 1;
    canvas.drawLine(Offset(x, highY), Offset(x, lowY), shadowPaint);
    
    // 绘制实体
    final isRise = closeY <= openY; // 涨跌判断
    final entityPaint = Paint()
      ..color = isRise ? Colors.red : Colors.green
      ..style = PaintingStyle.fill;
    
    final top = isRise ? closeY : openY;
    final bottom = isRise ? openY : closeY;
    
    canvas.drawRect(
      Rect.fromLTRB(x - width/2, top, x + width/2, bottom),
      entityPaint
    );
  }
  
  double _priceToY(double price, Size size) {
    // 价格到Y坐标的映射逻辑
    final minPrice = data.map((e) => e.low).reduce(min);
    final maxPrice = data.map((e) => e.high).reduce(max);
    return size.height - (price - minPrice) / (maxPrice - minPrice) * size.height;
  }
  
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

class KLineData {
  final double open;
  final double close;
  final double high;
  final double low;
  final double volume;
  final DateTime time;
  
  KLineData(this.open, this.close, this.high, this.low, this.volume, this.time);
}

2. 使用第三方库

推荐使用成熟的图表库：

  • fl_chart: 功能强大，支持K线图
  • charts_flutter: Google官方图表库
  • syncfusion_flutter_charts: 商业级图表库

使用fl_chart的示例：

LineChartData(
  lineBarsData: [
    LineChartBarData(
      spots: data.map((kline) => 
        FlSpot(kline.time.millisecondsSinceEpoch.toDouble(), kline.close)
      ).toList(),
    ),
  ],
)

3. 实现要点

  • 数据处理: 确保数据格式正确，包含开高低收四个价格
  • 坐标映射: 将价格和时间映射到画布坐标
  • 颜色区分: 用红色表示上涨，绿色表示下跌
  • 性能优化: 大数据量时考虑分页加载

建议先尝试自定义绘制理解原理，实际项目中推荐使用成熟的三方库以提高开发效率。

回到顶部