19.1.flutter-柱状图

作者: ChaosHeart | 来源:发表于2022-08-23 15:59 被阅读0次

19.1.flutter-柱状图
可视化库Highcharts-4-绘制柱状图2
可视化库Highcharts-3-绘制柱状图
iOS图表制作-01
bokeh绘制柱状图——堆叠图——直方图
【无机纳米材料科研制图——OriginLab 0210】Orig
MPAndroidChart(二)——BarChart
MPAndroidChart(三)——BarChart（多组）
Echars特殊的柱状图案例
实验|Pyecharts数据可视化分析—柱状图

1

import 'dart:math';

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

///柱状图-不可滑动-单数据
class ChartTestPage extends StatelessWidget {
  const ChartTestPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("chart_flutter")),
      body: Column(children: [Container(height: 240, child: _simpleBar())]),
    );
  }

  Widget _simpleBar() {
    var random = Random();

    var data = [
      OrdinalSales('2011', random.nextInt(100)),
      OrdinalSales('2012', random.nextInt(100)),
      OrdinalSales('2013', random.nextInt(100)),
      OrdinalSales('2014', random.nextInt(100)),
      OrdinalSales('2015', random.nextInt(100)),
      OrdinalSales('2016', random.nextInt(100)),
    ];

    var seriesList = [
      charts.Series<OrdinalSales, String>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, //柱体颜色
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        labelAccessorFn: (OrdinalSales sales, _) => "${sales.sales}", //柱体最上边数字
        data: data, //数据
      )
    ];

    return charts.BarChart(
      seriesList,
      animate: true,
      barRendererDecorator: new charts.BarLabelDecorator<String>(), //显示柱体最上边数字
      vertical: true, //true:垂直展示,false:水平展示
    );
  }
}

class OrdinalSales {
  final String year;
  final int sales;

  OrdinalSales(this.year, this.sales);
}

2

import 'dart:math';

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

///柱状图-单数据-可滑动
class ChartTestPage1 extends StatelessWidget {
  const ChartTestPage1({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("chart_flutter")),
      body: Column(children: [Container(height: 240, child: _simpleBar())]),
    );
  }

  Widget _simpleBar() {
    var random = Random();

    var data = [
      OrdinalSales('2011', random.nextInt(100)),
      OrdinalSales('2012', random.nextInt(100)),
      OrdinalSales('2013', random.nextInt(100)),
      OrdinalSales('2014', random.nextInt(100)),
      OrdinalSales('2015', random.nextInt(100)),
      OrdinalSales('2016', random.nextInt(100)),
    ];

    var seriesList = [
      charts.Series<OrdinalSales, String>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, //柱体颜色
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        labelAccessorFn: (OrdinalSales sales, _) => "${sales.sales}", //柱体最上边数字
        data: data,
      )
    ];

    ///左右滑动
    return charts.BarChart(
      seriesList,
      animate: true, // 动画
      behaviors: [
        charts.SlidingViewport(), //滑动窗口
        charts.PanAndZoomBehavior(), //平移和缩放行为
      ],
      barRendererDecorator: new charts.BarLabelDecorator<String>(), //显示柱体最上边数字
      domainAxis: new charts.OrdinalAxisSpec(viewport: new charts.OrdinalViewport('2011', 4)), //从2011,界面显示4个,其他隐
      vertical: true, //true:垂直展示,false:水平展示藏
    );
  }
}

class OrdinalSales {
  final String year;
  final int sales;

  OrdinalSales(this.year, this.sales);
}

3

import 'dart:math';

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

///左右滑动-柱状图-多数据
class ChartTestPage2 extends StatelessWidget {
  const ChartTestPage2({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("chart_flutter")),
      body: Column(children: [Container(height: 250, child: _simpleBar())]),
    );
  }

  Widget _simpleBar() {
    var random = Random();

    var data1 = [
      OrdinalSales('2011', random.nextInt(100)),
      OrdinalSales('2012', random.nextInt(100)),
      OrdinalSales('2013', random.nextInt(100)),
      OrdinalSales('2014', random.nextInt(100)),
      OrdinalSales('2015', random.nextInt(100)),
      OrdinalSales('2016', random.nextInt(100)),
      OrdinalSales('2017', random.nextInt(100)),
      OrdinalSales('2018', random.nextInt(100)),
    ];

    var data2 = [
      OrdinalSales('2011', random.nextInt(100)),
      OrdinalSales('2012', random.nextInt(100)),
      OrdinalSales('2013', random.nextInt(100)),
      OrdinalSales('2014', random.nextInt(100)),
      OrdinalSales('2015', random.nextInt(100)),
      OrdinalSales('2016', random.nextInt(100)),
      OrdinalSales('2017', random.nextInt(100)),
      OrdinalSales('2018', random.nextInt(100)),
    ];

    var data3 = [
      OrdinalSales('2011', random.nextInt(100)),
      OrdinalSales('2012', random.nextInt(100)),
      OrdinalSales('2013', random.nextInt(100)),
      OrdinalSales('2014', random.nextInt(100)),
      OrdinalSales('2015', random.nextInt(100)),
      OrdinalSales('2016', random.nextInt(100)),
      OrdinalSales('2017', random.nextInt(100)),
      OrdinalSales('2018', random.nextInt(100)),
    ];

    var seriesList = [
      charts.Series<OrdinalSales, String>(
        id: 'Sales1',
        colorFn: (_, __) => charts.ColorUtil.fromDartColor(Color(0xFFE41E31)),
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        labelAccessorFn: (OrdinalSales sales, _) => "${sales.sales}", //柱体最上边数字
        data: data1,
      ),
      charts.Series<OrdinalSales, String>(
        id: 'Sales2',
        colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, //柱体颜色
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        labelAccessorFn: (OrdinalSales sales, _) => "${sales.sales}",
        data: data2,
      ),
      charts.Series<OrdinalSales, String>(
        id: 'Sales3',
        colorFn: (_, __) => charts.MaterialPalette.yellow.shadeDefault,
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        labelAccessorFn: (OrdinalSales sales, _) => "${sales.sales}", //柱体最上边数字
        data: data3,
      ),
    ];

    ///左右滑动
    return charts.BarChart(
      seriesList, //数据
      animate: true, //动画
      behaviors: [
        charts.SlidingViewport(), //滑动窗口
        charts.PanAndZoomBehavior(), //平移和缩放行为
        //显示说明时的字体大小和颜色
        new charts.SeriesLegend(
          entryTextStyle: charts.TextStyleSpec(
            fontSize: 12,
            color: charts.Color.black,
          ),
        ),
      ],
      barGroupingType: charts.BarGroupingType.stacked, //多个数据时的展示方式 // stacked:上下多组 //grouped左右多组
      barRendererDecorator: new charts.BarLabelDecorator<String>(), //显示柱头文本
      domainAxis: new charts.OrdinalAxisSpec(viewport: new charts.OrdinalViewport('2011', 4)), //从2011,显示四个,其他隐藏
      vertical: true, //true:垂直展示,false:水平展示
    );
  }
}

class OrdinalSales {
  final String year;
  final int sales;

  OrdinalSales(this.year, this.sales);
}

4

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';
import 'package:imes_base_plugins/common/logs.dart';

import 'chart_histogram_model.dart';

///柱状图
class ChartHistogramWidget extends StatefulWidget {
  final String title; //从哪来的
  final List<String> names; //说明
  final Map<String, Color> nameColorMap; //说明-颜色 对照表
  final List<List<OrdinalSales>> data; //数据
  final bool vertical; //true:垂直展示,false:水平展示
  final bool animate; //true:开启动画,false:关闭动画
  final bool sliding; //true:开启滑动,false:关闭滑动
  final bool barGroupingType; //true:左右多组展示,false:上下多组展示
  final bool barRendererDecorator; //true:显示柱头文本,隐藏柱头文本
  final String xStart; //从 xStart 显示
  final int xCount; //显示 xCount 个
  final int maxBarWidthPx; //每个柱子的最大宽度

  const ChartHistogramWidget({
    Key key,
    @required this.title,
    @required this.names,
    @required this.nameColorMap,
    @required this.data,
    this.vertical = true,
    this.animate = true,
    this.sliding = true,
    this.barGroupingType = true,
    this.barRendererDecorator = true,
    this.xStart,
    this.xCount,
    this.maxBarWidthPx = 36,
  }) : super(key: key);

  @override
  State<ChartHistogramWidget> createState() => _ChartHistogramWidgetState();
}

class _ChartHistogramWidgetState extends State<ChartHistogramWidget> {
  //数据
  List<charts.Series<OrdinalSales, String>> _seriesList = [];

  ///initState
  @override
  void initState() {
    super.initState();
    logs("进入: ${widget.title}-图表");
    _seriesList = _getSeriesList(widget.data ?? []);
  }

  ///dispose
  @override
  void dispose() {
    logs("结束: ${widget.title}-图表");
    super.dispose();
  }

  ///build
  @override
  Widget build(BuildContext context) {
    logs("柱状图--说明: ${widget.names}");
    logs("名字颜色对照: ${widget.nameColorMap}");
    logs("数据: $_seriesList");
    return charts.BarChart(
      _seriesList, //数据
      animate: widget.animate, //动画
      //行为
      behaviors: widget.sliding
          ? [
              charts.SlidingViewport(), //滑动窗口
              charts.PanAndZoomBehavior(), //平移和缩放行为
              //显示说明时的字体大小和颜色
              // new charts.SeriesLegend(
              //   entryTextStyle: charts.TextStyleSpec(fontSize: 12, color: charts.Color.black),
              // ),
            ]
          : [],
      //多数据展示方式 stacked:上下多组 grouped左右多组
      barGroupingType: widget.barGroupingType ? charts.BarGroupingType.grouped : charts.BarGroupingType.stacked,
      //显示柱头文本
      barRendererDecorator: widget.barRendererDecorator ? charts.BarLabelDecorator<String>() : null,
      //从 xStart 显示,显示 xCount 个
      domainAxis: charts.OrdinalAxisSpec(
        viewport: charts.OrdinalViewport(widget.xStart ?? widget.data[0][0].x, widget.xCount ?? widget.data[0].length),
      ),
      //true:垂直展示,false:水平展示
      vertical: widget.vertical,
      //渲染器-设置外形
      defaultRenderer: charts.BarRendererConfig<String>(
        //多数据展示方式 stacked:上下多组 grouped左右多组
        groupingType: widget.barGroupingType ? charts.BarGroupingType.grouped : charts.BarGroupingType.stacked,
        //每个柱子的最大宽度
        maxBarWidthPx: widget.maxBarWidthPx,
        //
        barRendererDecorator: charts.BarLabelDecorator<String>(),
      ),
    );
  }

  //数据...

  ///获取 seriesList
  _getSeriesList(List<List<OrdinalSales>> data) {
    //空
    List<charts.Series<OrdinalSales, String>> newList = [];
    //遍历
    for (int i = 0; i < data.length; i++) {
      //创建series
      var series = charts.Series<OrdinalSales, String>(
        id: widget.names[i],
        colorFn: (_, __) => charts.ColorUtil.fromDartColor(widget.nameColorMap[widget.names[i]]), // 每个柱体的颜色
        domainFn: (OrdinalSales sales, _) => sales.x, //x轴
        measureFn: (OrdinalSales sales, _) => sales.y, //y轴
        labelAccessorFn: (OrdinalSales sales, _) => "${sales.y}", //显示柱头文本
        data: data[i], //数据
      );
      //添加
      newList.add(series);
    }
    return newList;
  }
}


///数据模型
class OrdinalSales {
  final String x;
  final int y;

  OrdinalSales(this.x, this.y);
}

参考：
https://www.jianshu.com/p/75f112d54028

19.1.flutter-柱状图
1 2 3 4 参考：https://www.jianshu.com/p/75f112d54028[https:/...
可视化库Highcharts-4-绘制柱状图2
Highcharts-4-柱状图2 本文介绍了3种Highcharts中柱状图的制作：堆叠柱状图分组堆叠柱状图...
可视化库Highcharts-3-绘制柱状图
Highcharts绘制柱状图本文介绍的是如何利用python-highcharts绘制柱状图水平/垂直柱状图...
iOS图表制作-01
基本的柱状图、折线图展示：（无交互事件）一、柱状图展示 1、ZWChartContentView 柱状图承载视图...
bokeh绘制柱状图——堆叠图——直方图
1、单系列柱状图-vbar 2.单系列柱状图 - 分类设置标签-ColumnDataSource 2、多系列柱状图...
【无机纳米材料科研制图——OriginLab 0210】Orig
此篇，我们来分享Origin绘制多组柱状图、立体柱状图和三维散点图。一、多组柱状图 1）准备数据。 ...
MPAndroidChart(二)——BarChart
BarChart柱状图：界面布局首先在activity中对柱状图的属性进行设置其中mChart是对柱状图的样式...
MPAndroidChart(三)——BarChart（多组）
BarChart柱状图（多组）首先在activity中对柱状图的属性进行设置其中mChart是对柱状图的样式及效...
Echars特殊的柱状图案例
一.横向的带有色彩的柱状图二.渐变的柱状图
实验|Pyecharts数据可视化分析—柱状图
1. 实验介绍本实验主要介绍柱状图理论与基于Python的柱状图实现。 1.1. 实验目的掌握柱状图基本使用场...