Flutter图表绘制插件simple_lane_chart的使用

比较图表

比较两个图表之间的差异。

Container(
     padding: EdgeInsets.symmetric(horizontal: 15),
     child: SimpleLaneChart(
     <firstValue>,
     <secondValue>,
     height: 20,
   ),
 ),

图表100%

从100%进行比较。

重要提示：你应该使用参数 calFrom100Perc = true，并且第二个值应该是 总值。

Container(
     padding: EdgeInsets.symmetric(horizontal: 15),
     child: SimpleLaneChart(
     <firstValue>,
     <totalValue>,
     calFrom100Perc: true,
     bgColor: Colors.deepOrange.withOpacity(0.3),
     color: Colors.deepOrange,
     height: 20,
   ),
 ),

完整示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 simple_lane_chart 插件。

import 'package:flutter/material.dart';
import 'package:simple_lane_chart/simple_lane_chart.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Example lane chart'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({required this.title});

  // 设置第一个值和第二个值
  final int firstValue = 23;
  final int secondValue = 40;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 15),
          child: SimpleLaneChart(
            firstValue,
            secondValue,
            height: 20,
          ),
        ),
      ),
    );
  }
}