Flutter滑动条形图插件slider_bar_chart的使用

Flutter滑动条形图插件slider_bar_chart的使用

📊 Slider Bar Chart

Slider Bar Chart 是一个轻量级且可定制的Flutter库，用于创建简单的条形图。适用于以优雅且简约的方式可视化比较数据。

🌟 特性

• 灵活配置：自定义标题、颜色和工具提示。
• 支持两个数据系列：可以显示一条或两条Y轴数据系列。
• 可定制的工具提示：格式化和样式化工具提示以显示上下文信息。
• 响应式设计：调整图表高度和布局以适应不同屏幕尺寸。
• 水平滚动：图表将自动启用水平滚动视图以适应所有数据。

🚀 安装

在pubspec.yaml文件中添加slider_bar_chart依赖：

dependencies:
  slider_bar_chart: ^0.0.5

🛠️ 使用

基本示例

首先，在Dart文件中导入slider_bar_chart包：

import 'package:slider_bar_chart/slider_bar_chart.dart';

创建一个SliderBarChartWidget实例：

SliderBarChartWidget(
  data: SbcData(
    xValues: List.generate(100, (index) => index),
    yValues: List.generate(
      100, (index) => Random().nextDouble() * 256),
  ),
),

控制图表的整体布局，包括高度、标题、条形和工具提示：

SliderBarChartWidget(
  decoration: SbcDecoration(
    height: 300.0, 
    showScrollbar: true, 
    singleBarPosition: SingleBarPosition.bottom, // 默认值
    titleDecoration: SbcTitleDecoration(
      xHeightSpace: 40.0,
      xWidthSpace: 35.0,
      showYTitles: true,
      yTitleTextFormatter: null,
      fixedYTitles: false,
      yTitlePosition: YTitlePosition.both,
    ),
    tooltipDecoration: SbcTooltipDecoration(
      backgroundColor: null,
      triggerMode: TooltipTriggerMode.tap,
      waitDuration: Duration.zero,
      padding: EdgeInsets.all(15.0),
      yTextFormatter: null,
      y2TextFormatter: null,
      border: null,
      borderRadius: 14
    ),
    barDecoration: SbcBarDecoration(
      barWidth: 15.0,
      showAsProgress: true,
      yColor: null,
      y2Color: null,
    ),
  ),
  data: SbcData(
    xValues: List.generate(100, (index) => index),
    yValues: List.generate(
      100, (index) => Random().nextDouble() * 256),
  ),
),

示例代码

以下是完整的示例代码：

import 'dart:math';

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '简单条形图示例',
      theme: ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(title: const Text('简单条形图示例')),
        body: Center(
          child: SingleChildScrollView(
            child: SafeArea(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  const Text('单个y值'),
                  SliderBarChartWidget(
                    data: SbcData(
                      xValues: List.generate(100, (index) => index),
                      yValues: List.generate(
                        100, (index) => Random().nextDouble() * 256),
                    ),
                  ),
                  const Divider(height: 100),
                  const Text('双y值'),
                  SliderBarChartWidget(
                    data: SbcData(
                      xValues: List.generate(100, (index) => index),
                      yValues: List.generate(
                        100, (index) => Random().nextDouble() * 256),
                      y2Values: List.generate(
                        100, (index) => Random().nextDouble() * 256),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}