在颤动中需要这种堆叠的条形图[关闭]答案

【问题标题】：need this kind of stacked bar graph in flutter [closed]在颤动中需要这种堆叠的条形图[关闭]
【发布时间】：2021-06-21 02:29:26
【问题描述】：

我尝试了 Syncfusion 插件的堆叠柱形图，但没有以这种方式工作。结果堆积条形图是：-

请帮我解决这个问题。谢谢。

【问题讨论】：

标签： flutter android-studio dart

【解决方案1】：

您可以使用流行的flutter_echarts 包来绘制堆叠图表，只需将选项传递给Echarts 小部件（阅读如何修改图表here 的属性）。示例代码如下：


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: SomeScreen(),
    );
  }
}

class SomeScreen extends StatefulWidget {
  @override
  _SomeScreenState createState() => _SomeScreenState();
}

class _SomeScreenState extends State<SomeScreen> {
  getOption(data) {
    var option = '''{
    legend: {
      data: // Use your data here
    },
    grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
    xAxis: [
      {
        type: 'category',
        data: // Use your data here,
      }
    ],
    yAxis: [
      {type: 'value'}
    ],
    series: [
      {
        name: // Use your data here,
        type: 'bar',
        stack: 'test',
        emphasis: {focus: 'series'},
        data: // Use your data here
      },
      {
        name: // Use your data here,
        type: 'bar',
        stack: 'test',
        emphasis: {focus: 'series'},
        data: // Use your data here
      },
      {
        name: // Use your data here,
        type: 'bar',
        stack: 'test',
        emphasis: {focus: 'series'},
        data: // Use your data here
      },
      {
        name: // Use your data here,
        type: 'bar',
        stack: 'test',
        emphasis: {focus: 'series'},
        data: // Use your data here
      },
      {
        name: // Use your data here,
        type: 'bar',
        stack: 'test',
        emphasis: {focus: 'series'},
        data: // Use your data here
      },
    ]
  }''';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Colors.white,
          width: 400,
          height: 500,
          child: FutureBuilder(
              future: _callAPI(), // Make a call to your API
              builder: (context, snapshot) {
                if (!snapshot.hasData) return Container();
                var data = snapshot.data;
                return Echarts(
                  option: getOption(data),
                );
              }
          ),
        ),
      ),
    );
  }
}

结果：

【讨论】：

很好的解决方案，但我想从 API 提供数据，这只能得到固定值。感谢@Bach 的帮助
@SumitTifane 我在这个例子中使用了修复数据。尝试获取数据然后使用它们创建option 字符串，然后您可以像往常一样显示它
@SumitTifane 刚刚更新了我的答案以帮助您更好地了解这个想法。只需将您的数据从 API 传入即可创建 option