記錄一下charts_flutter 的使用過程
1.先在pubspec.yaml添加chart包依賴
我這里使用的版本是
charts_flutter: ^0.9.0
2.定義數(shù)據(jù)類型
//折線圖
class Linesales {
? DateTime time;
? int sale;
? Linesales(this.time, this.sale);
}
一般的折線圖是用時間線為X軸坐標(biāo)渣叛。今天記錄的是自定義X軸的做法所以只用序號作為展位標(biāo)示
用兩個int類型即可
class SeriesData {
? final int day;
? final int count;
? SeriesData(this.day, this.count);
}
3.定義數(shù)據(jù)源
? final serial1data= [
? ? ? new SeriesData(1, 5),
? ? ? new SeriesData(2, 25),
? ? ? new SeriesData(3, 100),
? ? ? new SeriesData(4, 75),
? ];
創(chuàng)建單條折線數(shù)據(jù)
List<charts.Series<SeriesData, int>> seriesList = [
? ? ? new charts.Series<SeriesData, int>(
? ? ? ? id:'登錄次數(shù)',
? ? ? ? colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
? ? ? ? domainFn: (SeriesData sales, _) => sales.day,
? ? ? ? measureFn: (SeriesData sales, _) => sales.count,
? ? ? ? data: serial1data,
? ? ? ),
? ? ];
自定義X軸數(shù)據(jù) 這邊是做的一個近7天日期的數(shù)據(jù)顯示
final ticks=
? ? <charts.TickSpec<double>>[
? ? ? ? ? new charts.TickSpec(
? ? ? ? ? ? 0,
? ? ? ? ? ? label:'1.1',
? ? ? ? ? ? style: new charts.TextStyleSpec(//可對x軸設(shè)置顏色等
? ? ? ? ? ? ? color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))
? ? ? ? ),
? ? ? ? ? new charts.TickSpec(
? ? ? ? ? ? 1,
? ? ? ? ? ? label: '1.2',
? ? ? ? ? ? style: new charts.TextStyleSpec(//可對x軸設(shè)置顏色等
? ? ? ? ? ? ? ? color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))
? ? ? ? ),
? ? ? ? new charts.TickSpec(
? ? ? ? ? ? 2,
? ? ? ? ? ? label: '1.3',
? ? ? ? ? ? style: new charts.TextStyleSpec(//可對x軸設(shè)置顏色等
? ? ? ? ? ? ? ? color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))
? ? ? ? ),
? ? ? ? new charts.TickSpec(
? ? ? ? ? ? 3,
? ? ? ? ? ? label: '1.4',
? ? ? ? ? ? style: new charts.TextStyleSpec(//可對x軸設(shè)置顏色等
? ? ? ? ? ? ? color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))
? ? ? ? ),
? ? ? ? new charts.TickSpec(
? ? ? ? ? ? 4,
? ? ? ? ? ? label: '1.5',
? ? ? ? ? ? style: new charts.TextStyleSpec(//可對x軸設(shè)置顏色等
? ? ? ? ? ? ? color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))
? ? ? ? ),
? ? ? ? new charts.TickSpec(
? ? ? ? ? 5,
? ? ? ? ? ? label: '1.6',
? ? ? ? ? ? style: new charts.TextStyleSpec(//可對x軸設(shè)置顏色等
? ? ? ? ? ? ? color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))
? ? ? ? ),
? ? ? ? new charts.TickSpec(
? ? ? ? ? ? 6,
? ? ? ? ? ? label: '1.7,
? ? ? ? ? ? style: new charts.TextStyleSpec(//可對x軸設(shè)置顏色等
? ? ? ? ? ? ? color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))
? ? ? ? ),
? ? ];
//圖表構(gòu)成主體
var chart = new charts.LineChart(
? ? ? seriesList,
? ? ? animate: true,
? ? ? behaviors: [
? ? ? ? new charts.SeriesLegend(
? ? ? ? ? //這里的操作是修改的圖例
? ? ? ? ? // 圖例位置 在左側(cè)start 和右側(cè)end
? ? ? ? ? position: charts.BehaviorPosition.bottom,
? ? ? ? ? outsideJustification: charts.OutsideJustification.middleDrawArea,
? ? ? ? ? // 圖例條目? [horizontalFirst]設(shè)置為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) {
//時間里可以寫自己要觸發(fā)的東西
}
如下圖所示哀蘑，下圖為兩條線同理可加兩條線
