问题：

如何在颤振图中显示json数据

蒋向笛

2023-03-14

我对flutter还是新手，我一直试图在条形图中显示http请求中的一些数据。我找不到任何例子。我希望你们中的一些人能帮忙：）

我想使用网上画廊的这张图表。我只是为我的应用程序更改了类的名称：

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

class SimpleSeriesLegend extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  SimpleSeriesLegend(this.seriesList, {this.animate});

  factory SimpleSeriesLegend.withSampleData() {
    return new SimpleSeriesLegend(
      _createSampleData(),
      // Disable animations for image tests.
      animate: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    return new charts.BarChart(
      seriesList,
      animate: animate,
      barGroupingType: charts.BarGroupingType.grouped,
      // Add the series legend behavior to the chart to turn on series legends.
      // By default the legend will display above the chart.
      behaviors: [new charts.SeriesLegend()],
    );
  }

  /// Create series list with multiple series
  static List<charts.Series<LiveWerkzeuge, String>> _createSampleData() {
    final tool1Data = [
      new LiveWerkzeuge ('WSP1', 5),
      new LiveWerkzeuge ('WSP2', 25),
      new LiveWerkzeuge ('WSP3', 80),
      new LiveWerkzeuge ('WSP4', 75),
      new LiveWerkzeuge ('WSP5', 65),
      new LiveWerkzeuge ('WSP6', 55),
      new LiveWerkzeuge ('WSP7', 70),
      new LiveWerkzeuge ('WSP8', 90),
    ];
    
    return [
      new charts.Series<LiveWerkzeuge, String>(
        id: 'WZG1',
        domainFn: (LiveWerkzeuge wear, _) => wear.wsp,
        measureFn: (LiveWerkzeuge wear, _) => wear.belastung,
        data: tool1Data,
      ),
    ];
  }

}
/// Sample ordinal data type.
class LiveWerkzeuge {
  final String wsp;
  final int belastung;

  LiveWerkzeuge(this.wsp, this.belastung);
}

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';

import 'package:http/http.dart' as http;

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String url = 'http://localhost/werkzeug/public/api/data_tool1';
  List data;
  Timer timer;

  Future<String> makeRequest() async {
    var response = await http
        .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});

    setState(() {
      var extractdata = JSON.decode(response.body);
      data = extractdata;
    });
  }

  @override
  void initState() {
    super.initState();
    timer = new Timer.periodic(new Duration(seconds: 2), (Timer timer) async {
      this.makeRequest();
    });
  }

  @override
  void dispose() {
    super.dispose();
    timer.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Tool Data'),
        ),
        body: new ListView.builder(
            itemCount: data == null ? 0 : data.length,
            itemBuilder: (BuildContext context, int i) {
              return new ListTile(
                title: new Text('Tool 1 Temperature is : ''${data[i]["temp1"]}' ' and tool 2 is: ''${data[i]["temp2"]}'),
              );
            }
        )
    );
  }
}

现在我想把这两者结合起来。

数据是这样的：

[{“时间戳”：“2018-06-29 14:39:18”,“RPM”：0,“RPM_Filter”：0,“accel”：0,“temp1”：104,“temp2”：746,“temp3”：134,“temp4”：77,“temp5”：0,“temp6”：0,“temp7”：0,“temp8”：0,“dms1”：0,“dms2”：0,“dms3”：0,“dms4”：0,“batt”：0,“shock”：0,“shock_accel”：0,“shock_degxy”：0,“tion_id”：0,“wear1”：0,“wear2”：0,“wear3”：0,“wear4”：0,“wear5”：0,“wear6”：0,“wear7”：0,“wear8”：0,“standzeit1”：0,“standzeit2”：0,“standzeit3”：0,“standzeit5”：0,“standzeit6”：0,“standzeit7”：0,“standzeit8”：0}]

新的Exeption：

I/Flutter(7654):WIDGETS LIBRARY捕获的异常:I/Flutter(7654):构建MyHomePage引发以下范围错误（脏，状态:_MyHomePagestate#9477b):I/Flutter(7654):RangeError（索引）：无效值：仅有效值为0：1 I/Flutter(7654):I/Flutter(7654):I/Flutter(7654):引发异常时，这是堆栈:I/Flutter(7654):#0列表。[](DART:core/runtime/libgrowable_array.DART:141:60)I/Flutter(7654):#1_MyHomePageState.createSeries（文件:///users/eti/androidStudioProjects/test_json_app/lib/main.DART:71:35)I/Flutter(7654):#2_MyHomePageState.createSeries（文件ts/test_json_app/lib/main.dart:57:58)I/flutter(7654):#4 statefulelement.build（包:flutter/src/WIDGETS/framework.dart:3743:27)I/flutter(7654):#5 componentelement.perform重建（包:flutter/src/widgets/framework.dart:3655:15)I/flutter(7654):#6 element.Rebuild（包:flutter/src/widgets/framework.dart:3508:5)I/flutter(7654):#7 buildowner.buildscope（包:flutter/src/widgets/framework.dart:2255:33)I/flutter(7654):#7buildowner.buildscope（包Ter(7654):#9_widgetsflutterbinding&bindingbase&gesturebinding&servicesbinding&schedurebinding&paintingbinding&renderbinding._handlepersistentframecallback（包:flutter/src/render/binding.dart:208:5)I/flutter(7654):#10_widgetsflutterbinding&bindingbase&gesturebinding&schedurebinding.dart:990:15)I/flutter(7654):#11_.HandleDrawframe（包装：Flutter/SRC/scheduler/binding.dart:930:9)I/flutter(7654):#12_widgetsflutterbinding&bindingbase&gesturebinding&servicesbinding&schedulerbinding._handledrawframe（包:flutter/src/scheduler/binding.dart:842:5)I/flutter(7654):#13_调用(dart:ui/hooks.dart:120:13)I/flutter(7654):#14_I/Flutter（7654）：引发另一个异常：范围错误（索引）：无效值：仅有效值为0：1 I/Flutter（7654）：引发另一个异常：范围错误（索引）：无效值：仅有效值为0：1

共有1个答案

曾飞雨

2023-03-14

我想你想要的是：

import 'dart:async';
import 'dart:convert';

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List data;
  Timer timer;

  makeRequest() async {
    var response = await http.get(
      'http://localhost/werkzeug/public/api/data_tool1',
      headers: {'Accept': 'application/json'},
    );

    setState(() {
      data = json.decode(response.body);
    });
  }

  @override
  void initState() {
    super.initState();
    timer = new Timer.periodic(new Duration(seconds: 2), (t) => makeRequest());
  }

  @override
  void dispose() {
    timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Tool Data'),
      ),
      body: data == null ? CircularProgressIndicator() : createChart(),
    );
  }

  charts.Series<LiveWerkzeuge, String> createSeries(String id, int i) {
    return charts.Series<LiveWerkzeuge, String>(
      id: id,
      domainFn: (LiveWerkzeuge wear, _) => wear.wsp,
      measureFn: (LiveWerkzeuge wear, _) => wear.belastung,
      // data is a List<LiveWerkzeuge> - extract the information from data
      // could use i as index - there isn't enough information in the question
      // map from 'data' to the series
      // this is a guess
      data: [
        LiveWerkzeuge('WSP1', data[i]['temp1']),
        LiveWerkzeuge('WSP2', data[i]['temp2']),
        LiveWerkzeuge('WSP3', data[i]['temp3']),
        LiveWerkzeuge('WSP4', data[i]['temp4']),
        LiveWerkzeuge('WSP5', data[i]['temp5']),
        LiveWerkzeuge('WSP6', data[i]['temp6']),
        LiveWerkzeuge('WSP7', data[i]['temp7']),
        LiveWerkzeuge('WSP8', data[i]['temp8']),
      ],
    );
  }

  Widget createChart() {
    // data is a List of Maps
    // each map contains at least temp1 (tool 1) and temp2 (tool 2)
    // what are the groupings?

    List<charts.Series<LiveWerkzeuge, String>> seriesList = [];

    for (int i = 0; i < data.length; i++) {
      String id = 'WZG${i + 1}';
      seriesList.add(createSeries(id, i));
    }

    return new charts.BarChart(
      seriesList,
      barGroupingType: charts.BarGroupingType.grouped,
    );
  }
}

class LiveWerkzeuge {
  final String wsp;
  final int belastung;

  LiveWerkzeuge(this.wsp, this.belastung);
}

类似资料：

在颤振中解码JSON

REST_API提供如下JSON对象：问题：我如何用Dart解析它？我没有让它运行。我的主要问题是，任何使用json的方法。解码将删除所有注释，因此字符串不再是字符串。当然，我可以在开头和结尾去掉方括号，但这不是我所说的好编码。也许你们中的一些人可以帮忙；-）祝你有美好的一天！
颤振显示一些错误

我正在尝试将我的颤动应用程序连接到我的手机，但它不起作用...我在终端中写了，它向我展示了一些错误：我正在使用VS代码（如果很重要）。SDK管理器的路径是什么？为什么对我说“视觉工作室未安装”，如果它写在VS代码终端中？谢谢大家！
如何在颤振中实现圆角图像

我正在使用Flutter制作一个关于电影的信息列表。现在我希望左边的封面图片是圆角图片。我做了以下操作，但没有成功。谢谢如下所示
如何在颤振中使用进度指示器？

我是flutter的新手，想知道在我的布局中添加的更好方法。例如，我的登录视图。这个视图有用户名，密码和登录按钮。我确实希望创建一个覆盖布局()，在加载时显示进度指示器，就像我在NativeScript中使用的那样，但我不知道该如何做，也不知道这是否是更好的方法。例如，在NativeScript上，我在main布局中添加了IndicatorActivity，并将busy设置为true或false，
如何在firebase颤振中向现有地图添加新数据

以下是firebase文档数据我想向购买的id添加一个新的映射值。这是当前代码但是使用此代码替换了map值，如何向现有map添加另一个map值这样地
颤振 - 如何在不下载颤振的情况下切换颤振通道

目前我正在尝试颤振网页，我需要在颤振主频道工作。但是，后来我需要继续我的其他项目。在他们身上，我正在研究颤振稳定通道。但是，每当我使用命令“flutter channel stable”或“fluter channel master”切换我的flutter通道时，它每次都会重新下载sdk和其他工具。目前，我已经下载了稳定的颤振sdk和稳定的dart sdk。我已将它们移动到“FlutterS

如何在颤振图中显示json数据

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档