flutter 中设置一个chart
时间: 2024-02-24 13:58:05 浏览: 171
在Flutter中,您可以使用`charts_flutter`库来创建各种类型的图表。以下是一个简单的示例,演示如何在Flutter中设置一个简单的图表:
```dart
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
class MyChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
MyChart(this.seriesList, {this.animate});
factory MyChart.withSampleData() {
return MyChart(
_createSampleData(),
animate: true,
);
}
@override
Widget build(BuildContext context) {
return charts.BarChart(
seriesList,
animate: animate,
);
}
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [
OrdinalSales('2014', 5),
OrdinalSales('2015', 25),
OrdinalSales('2016', 100),
OrdinalSales('2017', 75),
];
return [
charts.Series<OrdinalSales, String>(
id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: data,
)
];
}
}
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}
```
在上面的代码中,我们首先定义了一个名为`MyChart`的小部件,它接受一个`seriesList`参数和一个`animate`参数。`seriesList`参数是一个包含图表数据的`List<charts.Series>`,`animate`参数是一个布尔值,指示是否启用动画效果。
然后,我们创建了一个`MyChart.withSampleData`构造函数,它返回一个包含示例数据的`MyChart`实例。
在`build`方法中,我们创建了一个`BarChart`小部件,并将`seriesList`作为数据源传递给它。我们还将`animate`参数传递给`BarChart`,以指示是否启用动画效果。
最后,我们定义了一个名为`OrdinalSales`的简单类,用于表示一年的销售额。
上述代码中使用的是柱状图(`BarChart`),如果您需要使用其他类型的图表,可以查看`charts_flutter`库的文档以获取更多信息。
阅读全文