谈一谈 charts_flutter的折线图表

记录一下charts_flutter 的使用过程

1.先在pubspec.yaml添加chart包依赖

我这里使用的版本是

charts_flutter: ^0.9.0
复制代码

2.定义数据类型

//折线图
class Linesales {
  DateTime time;
  int sale;
  Linesales(this.time, this.sale);
}
一般的折线图是用时间线为X轴坐标。今天记录的是自定义X轴的做法所以只用序号作为展位标示
用两个int类型即可 
class SeriesData {
  final int day;
  final int count;

  SeriesData(this.day, this.count);
}
复制代码

3.定义数据源

   final serial1data= [
       new SeriesData(1, 5),
       new SeriesData(2, 25),
       new SeriesData(3, 100),
       new SeriesData(4, 75),
   ];
创建单条折线数据
List<charts.Series<SeriesData, int>> seriesList = [
      new charts.Series<SeriesData, int>(
        id:'登录次数',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (SeriesData sales, _) => sales.day,
        measureFn: (SeriesData sales, _) => sales.count,
        data: serial1data,
      ),
    ];

自定义X轴数据 这边是做的一个近7天日期的数据显示
final ticks=
    
     <charts.TickSpec<double>>[
    
          new charts.TickSpec(
            0,
            label:'1.1',
             style: new charts.TextStyleSpec(//可对x轴设置颜色等
               color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))
        ),
          new charts.TickSpec(
            1,
            label: '1.2',
             style: new charts.TextStyleSpec(//可对x轴设置颜色等
                color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))
        ),
         new charts.TickSpec(
            2,
            label: '1.3',
             style: new charts.TextStyleSpec(//可对x轴设置颜色等
                color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))
        ),
         new charts.TickSpec(
            3,
            label: '1.4',
            style: new charts.TextStyleSpec(//可对x轴设置颜色等
               color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))
        ),
         new charts.TickSpec(
            4,
            label: '1.5',
            style: new charts.TextStyleSpec(//可对x轴设置颜色等
              color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))
        ),
        new charts.TickSpec(
           5,
            label: '1.6',
            style: new charts.TextStyleSpec(//可对x轴设置颜色等
               color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))
        ),
        new charts.TickSpec(
            6,
            label: '1.7,
            style: new charts.TextStyleSpec(//可对x轴设置颜色等
              color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))
        ),
    ];
//图表构成主体
var chart = new charts.LineChart(
      seriesList,
      animate: true,
      behaviors: [
        new charts.SeriesLegend(
          //这里的操作是修改的图例
          // 图例位置 在左侧start 和右侧end
          position: charts.BehaviorPosition.bottom,
          outsideJustification: charts.OutsideJustification.middleDrawArea,
          // 图例条目  [horizo​​ntalFirst]设置为false，图例条目将首先作为新行而不是新列增长
          horizontalFirst: true,
          // 每个图例条目周围的填充Padding
          cellPadding: new EdgeInsets.only(left:50.w,right: 50.0.w, bottom: 4.0),
          // 显示度量
          showMeasures: false,
          // 度量格式
          // measureFormatter: (num value) {
          //   return value == null ? '-' : '${value}k';
          // },
        ),
        
      ],
      //点击图表事件
       selectionModels: [
         new charts.SelectionModelConfig(
           type: charts.SelectionModelType.info,
           changedListener: _onSelectionChanged,
         )
       ],
      domainAxis: new charts.NumericAxisSpec(
        tickProviderSpec: new charts.StaticNumericTickProviderSpec(ticks),
        // tickProviderSpec: ticks,
        tickFormatterSpec: charts.BasicNumericTickFormatterSpec(
            (measure) => exp(measure).round().toString()),
      ),
    );

//点击图表事件
 _onSelectionChanged(charts.SelectionModel model) {
//时间里可以写自己要触发的东西
 }
复制代码

如下图所示，下图为两条线同理可加两条线