站长

项目使用图表，对比了 google 的 <a href="https://blogweb.cn/link?target=https://pub.dev/packages/flutter_charts" target="_blank" rel="nofollow noopener noreferrer">flutter_charts</a>和<a href="https://blogweb.cn/link?target=https://pub.dev/packages/fl_chart" target="_blank" rel="nofollow noopener noreferrer">fl_chart</a>，最后选取了后者，原因之一是 flutter_charts 不支持曲线图，需要自己设置。
<h2 id="heading-0">介绍</h2>
<h3 id="heading-1">图形类型</h3>
fl_chart 支持的图表种类非常齐全：
<ul>
<li>
折线图
<img src="https://img.blogweb.cn/article/5256860c5349447981a1d01bda168421.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
</li>
<li>
曲线图
<img src="https://img.blogweb.cn/article/1b34b9affb844c4789886baacbbac777.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
<img src="https://img.blogweb.cn/article/48da3d581c004ce494b6825a5368fb53.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
!<img src="https://img.blogweb.cn/article/5354bed96c5b45a38de03c22125647c2.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
<img src="https://img.blogweb.cn/article/0f74da7a0ff34c2cadad8b8e9742ba2b.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
<img src="https://img.blogweb.cn/article/8779cbaebcbb4b7992bfc723c2403128.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
<img src="https://img.blogweb.cn/article/a38075ef74a14365b12ae87a5d34b6d8.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
<img src="https://img.blogweb.cn/article/bc15b43c6b854077bff2e7b53cdb4ad1.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
<img src="https://img.blogweb.cn/article/6067e52207f64da69dd7562b73c433a1.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
</li>
<li>
柱状图
<img src="https://img.blogweb.cn/article/5012cc2eab3c4bad9f9ab3e83edc8ee6.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
<img src="https://img.blogweb.cn/article/d6ca4e7eb62246d29192c551fbbb6b2e.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
<img src="https://img.blogweb.cn/article/b42ae68f1faf4cfb99679c6f59577fb7.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
<img src="https://img.blogweb.cn/article/d77be8fdea714ae1906187f8a51040b9.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
<img src="https://img.blogweb.cn/article/3bb4fad1c4044e668517489fc18e8923.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
<img src="https://img.blogweb.cn/article/67ac0ec315c74251a24fc50680354660.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
</li>
<li>
饼图
<img src="https://img.blogweb.cn/article/737ea5e411da4e40a02b3098852de4f9.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
<img src="https://img.blogweb.cn/article/839cf27425d943dfb79222c25de1bdea.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
<img src="https://img.blogweb.cn/article/a423a603d74748ce96c28513f56d6450.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
</li>
<li>
散列图
<img src="https://img.blogweb.cn/article/d77e25b70809415298b513207657f5ff.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
<img src="https://img.blogweb.cn/article/c5f4ed1e0586427bbb4bb1e1a8120770.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
</li>
<li>
雷达图
<img src="https://img.blogweb.cn/article/868da25d55ad4c878ab172da67d94396.webp" loading="lazy" alt=" Flutter图表库fl_chart的使用解析(一)-介绍">
</li>
<li>
。。。
<h2 id="heading-2">使用</h2>
<ol>
<li>
添加依赖
在项目根目录的 pubspec.yaml 里添加：
<pre class="language-yml line-numbers"><code>dependencies:
 fl_chart: ^0.35.0
</code></pre>
</li>
<li>
下载
在控制台输入：
<pre class="language-sh line-numbers"><code>flutter packages get
</code></pre>
</li>
</ol>
</li>
</ul>

项目使用图表，对比了google的和，最后选取了后者，原因之一是flutter_charts不支持曲线图，需要自己设置。介绍图形类型fl_chart支持的图表种类非常齐全：