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

【问题标题】：How to display json data in flutter charts如何在颤振图表中显示 json 数据
【发布时间】：2018-12-23 07:11:21
【问题描述】：

我还是 Flutter 的新手，我一直在尝试在条形图中显示来自 http 请求的一些数据。我找不到任何例子。我希望你们中的一些人可以提供帮助:)

我想用这个来自在线画廊的Chart。我刚刚为我的应用更改了类的名称：

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);
}

这是正确显示我的代码的唯一方法，抱歉。

这是我发现的一个简单代码，用于访问和显示 ListView 中的数据并自动更新。我只是想学习如何做到这一点，它对我有用：

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"]}'),
              );
            }
        )
    );
  }
}

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

这是数据的样子：

[{"timestamp":"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,"shock_degxz":0,"error":0,"connection_id ":0,"Wear1":0,"Wear2":0,"Wear3":0,"Wear4":0,"Wear5":0,"Wear6":0,"Wear7":0,"Wear8": 0,"standzeit1":0,"standzeit2":0,"standzeit3":0,"standzeit4":0,"standzeit5":0,"standzeit6":0,"standzeit7":0,"standzeit8":0} ]

新例外：

I/flutter (7654): ══╡ 小部件库发现异常╞════════════════════════════════════ ════════════════════════════ I/flutter（7654）：在构建 MyHomePage（脏，状态：_MyHomePageState#9477b）时引发了以下 RangeError： I/flutter (7654): RangeError (index): Invalid value: 只有有效值是 0: 1 我/颤振（7654）： I/flutter (7654)：当异常被抛出时，这是堆栈： I/flutter (7654): #0 List.[] (dart:core/runtime/libgrowable_array.dart:141:60) I/flutter (7654): #1 _MyHomePageState.createSeries (file:///Users/Eti/AndroidStudioProjects/test_json_app/lib/main.dart:71:35) I/flutter (7654): #2 _MyHomePageState.createChart (file:///Users/Eti/AndroidStudioProjects/test_json_app/lib/main.dart:89:7) I/flutter (7654): #3 _MyHomePageState.build (file:///Users/Eti/AndroidStudioProjects/test_json_app/lib/main.dart:57:58) I/flutter (7654): #4 StatefulElement.build (package:flutter/src/widgets/framework.dart:3743:27) I/flutter (7654): #5 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3655:15) I/flutter (7654): #6 Element.rebuild (package:flutter/src/widgets/framework.dart:3508:5) I/flutter (7654): #7 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2255:33) I/flutter (7654): #8 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:626:20) I/flutter (7654): #9 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:208:5) I/flutter (7654): #10 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15) I/flutter (7654): #11 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9) I/flutter (7654): #12 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5) I/flutter (7654): #13 _invoke (dart:ui/hooks.dart:120:13) I/flutter (7654): #14 _drawFrame (dart:ui/hooks.dart:109:3) 我/颤振（7654）：═══════════════════════════════════════════════════════ ══════════════════════════════════════════════════ ═══════ I/flutter (7654): 另一个异常被抛出： RangeError (index): Invalid value: Only valid value is 0: 1 I/flutter (7654): 另一个异常被抛出： RangeError (index): Invalid value: Only valid value is 0: 1

【问题讨论】：

标签： json charts httprequest flutter

【解决方案1】：

我想你想要的是：

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);
}

【讨论】：

我发现我只是为一个工具提供了数据，所以我显示的图表可能有点混乱。对此感到抱歉。我编辑了代码。但正如我所见，这不应该是您的代码的问题。我最大的问题是如何转换数据，以便图表库识别它们以便正确显示。但我仍然得到一个例外。我把它放在问题中。感谢您的帮助。
试试这个新版本的createChart。
还是得到一个异常，模拟器显示： RangeError (index): Invalud value: only valid value is 0:1
试试这个。数据是否只包含一个元素？这会创建正确数量的系列。
是的，它只有一个元素，例如。 temp1 或 temp2 等等......现在它可以工作了，它不显示图表图例，但我应该能够做到这一点。但图表显示来自数据库的正确数据。非常感谢您的帮助，我真的很感激:)

【解决方案2】：

变化：

data = json.decode(response.body);

到：

data = json.decode(utf8.decode(response.bodyBytes)); //for special characters

【讨论】：