记录一下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,
// 图例条目 [horizontalFirst]设置为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) {
//时间里可以写自己要触发的东西
}
如下图所示，下图为两条线同理可加两条线
