Flutter 实现平滑曲线折线图

最新推荐文章于 2024-08-30 17:26:22 发布

weixin_34341229

最新推荐文章于 2024-08-30 17:26:22 发布

阅读量5.5k

点赞数 1

文章标签：移动开发 ui javascript ViewUI

原文链接：https://juejin.im/post/5c14891ef265da61616e956b

版权

本文介绍了在 Flutter 项目中，由于 Google/charts 缺乏平滑曲线图，作者 fork 该项目并实现了平滑曲线效果。文章详细阐述了从样条插值、三次贝塞尔曲线到 MonotoneX 曲线的实现过程，最终解决了顶点越界问题，提供了完美平滑曲线的解决方案。

摘要由CSDN通过智能技术生成

背景

公司最近引入了 Flutter 技术栈，Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。然而由于 Flutter 还在早期发展阶段没有，生态建设还不够完善。比如项目中需要用到图表 UI 组件，经过一番调研，Google/charts 功能最强大，样式最丰富（详见 online gallery），于是引入到项目中。但是 charts 只实现了直线折线图，所以只能 fork charts 项目自己实现平滑曲线效果。

基础使用

Goole/charts 这个图表库很强大，但是文档不太友好，只有 online gallery 上有纯示例代码，几乎没有 Api 说明。

可行性分析的 Demo 效果

仔细研究优化后的效果

具体使用代码及注释

return Container(
  height: 150.0,
  child: charts.LineChart(
    _createChartData(), // 折线图的点的数据列表
    animate: true, // 动画
    defaultRenderer: charts.LineRendererConfig( // 折线图绘制的配置
      includeArea: true,
      includePoints: true,
      includeLine: true,
      stacked: false,
    ),
    domainAxis: charts.NumericAxisSpec( // 主轴的配置
      tickFormatterSpec: DomainFormatterSpec(widget.dateRange), // tick 值的格式化，这里把 num 转换成 String
      renderSpec: charts.SmallTickRendererSpec( // 主轴绘制的配置
        tickLengthPx: 0, // 刻度标识突出的长度
        labelOffsetFromAxisPx: 12, // 刻度文字距离轴线的位移
        labelStyle: charts.TextStyleSpec( // 刻度文字的样式
          color: ChartUtil.getChartColor(HColors.lightGrey),
          fontSize: HFontSizes.smaller.toInt(),
        ),
        axisLineStyle: charts.LineStyleSpec( // 轴线的样式
          color: ChartUtil.getChartColor(ChartUtil.lightBlue),
        ),
      ),
      tickProviderSpec: charts.BasicNumericTickProviderSpec( // 轴线刻度配置
        dataIsInWholeNumbers: false,
        desiredTickCount: widget.data.length, // 期望显示几个刻度
      ),
    ),
    primaryMeasureAxis: charts.NumericAxisSpec( // 交叉轴的配置，参数参考主轴配置
      showAxisLine: false, // 显示轴线
      tickFormatterSpec: MeasureFormatterSpec(),
      tickProviderSpec: charts.BasicNumericTickProviderSpec(
        dataIsInWholeNumbers: false,
        desiredTickCount: 4,
      ),
      renderSpec: charts.GridlineRendererSpec( // 交叉轴刻度水平线
        tickLengthPx: 0,
        labelOffsetFromAxisPx: 12,
        labelStyle: charts.TextStyleSpec(
          color: ChartUtil.getChartColor(HColors.lightGrey),
          fontSize: HFontSizes.smaller.toInt(),
        ),
        lineStyle: charts.LineStyleSpec(
          color: ChartUtil.getChartColor(ChartUtil.lightBlue),
        ),
        axisLineStyle: charts.LineStyleSpec(
          color: ChartUtil.getChartColor(ChartUtil.lightBlue),
        ),
      ),
    ),
    selectionModels: [ // 设置点击选中事件