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

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

我曾想过使用在线图库中的这个。我刚刚更改了我的应用程序的类名称：

导入“包装：颤振/材料.省道”；
以图表形式导入“包：图表\颤振/颤振.省道”；
类SimpleSeriesGend扩展了无状态小部件{
最终清单系列清单；
最后的布尔动画；
SimpleSeriesGend（this.seriesList，{this.animate}）；
带采样数据的factory SimpleSeriesGend{
返回新的SimpleSeriesGend(
_createSampleData（），
//禁用图像测试的动画。
动画：假，
);
}
@凌驾
小部件构建（构建上下文）{
返回新图表。条形图(
系列列表，
动画制作：动画制作，
barGroupingType:charts.barGroupingType.grouped，
//将序列图例行为添加到图表以启用序列图例。
//默认情况下，图例将显示在图表上方。
行为：[新建图表.系列图例（）]，
);
}
///创建包含多个系列的系列列表
静态列表_createSampleData（）{
最终工具1数据=[
新LiveWerkzeuge（'WSP1'，5），
新LiveWerkzeuge（'WSP2'，25），
新LiveWerkzeuge（'WSP3'，80），
新LiveWerkzeuge（'WSP4'，75），
新LiveWerkzeuge（'WSP5'，65），
新LiveWerkzeuge（'WSP6'，55），
新LiveWerkzeuge（'WSP7'，70），
新LiveWerkzeuge（'WSP8'，90），
];
返回[
新图表系列(
id:'WZG1'，
域名fn：（LiveWerkzeuge-wear，）=>wear.wsp，
测量值：（LiveWerkzeuge磨损，）=>wear.belastug，
数据：工具1数据，
),
];
}
}
///样本顺序数据类型。
LiveWerkzeuge类{
最终串wsp；
最后一次射门；
LiveWerkzeuge（this.wsp，this.belastung）；
}

我想你想要的是：

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

导入'dart:async'；
导入“dart:convert”；
进口“包装：颤振/材料.省道”；
将“package:http/http.dart”导入为http；
以图表形式导入“包：图表\颤振/颤振.省道”；
void main（）=>runApp（新的MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
主页：新建MyHomePage（），
);
}
}
类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>new_MyHomePageState（）；
}
类_MyHomePageState扩展状态{
列出数据；
定时器；
makeRequest（）异步{
var response=wait http.get(
'http://localhost/werkzeug/public/api/data_tool1',
标题：{'Accept'：'application/json'}，
);
设置状态（）{
data=json.decode（response.body）；
});
}
@凌驾
void initState（）{
super.initState（）；
计时器=新计时器。周期（新的持续时间（秒：2），（t）=>makeRequest（））；
}
@凌驾
无效处置（）{
timer.cancel（）；
super.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
appBar：新的appBar(
标题：新文本（“工具数据”），
),
body:data==null？CircularProgressIndicator（）：createChart（），
);
}
charts.Series创建系列（字符串id，int i）{
返回图表。系列(
id:id，
域名fn：（LiveWerkzeuge-wear，）=>wear.wsp，
测量值：（LiveWerkzeuge磨损，）=>wear.belastug，
//数据是一个列表-从数据中提取信息
//可以使用i作为索引-问题中没有足够的信息
//从“数据”映射到系列
//这是一个猜测
数据：[
LiveWerkzeuge（'WSP1'，数据[i]['temp1']），
LiveWerkzeuge（'WSP2'，数据[i]['temp2']），
LiveWerkzeuge（'WSP3'，数据[i]['temp3']），
LiveWerkzeuge（'WSP4'，数据[i]['temp4']），
LiveWerkzeuge（'WSP5'，数据[i]['temp5']），
LiveWerkzeuge（'WSP6'，数据[i]['temp6']），
LiveWerkzeuge（'WSP7'，数据[i]['temp7']），
LiveWerkzeuge（'WSP8'，数据[i]['temp8']），
],
);
}
Widget createChart（）{
//数据是地图的列表
//每个地图至少包含temp1（1号工具）和temp2（2号工具）
//什么是分组？
列表系列列表=[]；
对于（int i=0；i

更改：

data = json.decode(response.body);

致：

---

我发现我只是提供了一个工具的数据，所以我显示的图表可能有点混乱。对不起。我编辑了代码。但正如我所看到的，这不应该是代码的问题。我最大的问题是如何转换数据，以便图表库能够识别它们以便正确显示。但我还是有个例外。我把它放在问题里了。感谢您的帮助。请尝试此新版本的

createChart

。如果仍然出现异常，模拟器将显示：RangeError（index）：Invalud值：仅有效值为0:1重试此操作。数据是否只包含一个元素？这创建了正确数量的系列。是的，它只有一个元素，例如temp1或temp2等…现在它工作了，它不显示图表图例，但我应该能够使这项工作。但是图表显示了数据库中正确的数据。非常感谢您的帮助，我真的很感激：）

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