从 dart 中的 json 更新数据后，SfCartesianChart 图表不显示

问题描述

这是 SfCartesianChart，我想根据下面给出的其余 API 数据使其动态化，但是当我将动态数据放入其中时，图表在图例文本中仅显示空值，没有显示数据，但我已经发布了所需数据。请帮助我正确与否。

SfCartesianChart _getSpacingColumnChart() {
    return SfCartesianChart(
      // borderColor: Colors.red,// borderWidth: 2,// Sets 15 logical pixels as margin for all the 4 sides.
      margin: EdgeInsets.all(0),plotAreaBorderWidth: 0,title: ChartTitle(
          // text: 'Inventory - Finished Products',// textStyle: TextStyle(
          //   fontSize: 18.0,//   color: Colors.blueAccent,// ),text: widget.title,// backgroundColor: Colors.lightGreen,// borderColor: Colors.blue,borderWidth: 2,// Aligns the chart title to left
          alignment: ChartAlignment.center,// ignore: deprecated_member_use
          textStyle: ChartTextStyle(
            color: Colors.blueAccent,// fontFamily: 'Roboto',// fontStyle: FontStyle.italic,fontSize: 11,)),primaryXAxis: CategoryAxis(
        majorGridLines: MajorGridLines(width: 0),),primaryYAxis: NumericAxis(
          // maximum: 150,// minimum: 0,interval: 25,axisLine: AxisLine(width: 0),majorTickLines: MajorTickLines(size: 0)),palette: <Color>[
        Color.fromrGBO(15,207,105,1.0),Color.fromrGBO(242,209,106,Color.fromrGBO(0,72,205,1.0)
      ],series: _getDefaultColumn(),legend: Legend(
          isVisible: true,// Legend will be placed at the bottom
          position: LegendPosition.bottom,// Overflowing legend content will be wraped
          overflowMode: LegendItemOverflowMode.wrap),// tooltipBehavior: TooltipBehavior(
      //     enable: true,//     canShowMarker: true,//     header: '',//     format: 'point.y marks in point.x'),tooltipBehavior: TooltipBehavior(enable: true),);
  }

List<ColumnSeries<ColumnChartDataModel,String>> _getDefaultColumn() {
    List<ColumnChartDataModel> chartData = <ColumnChartDataModel>[];

    for (Map i in widget.data)
      chartData
          .add(ColumnChartDataModel.fromJson(i) // Deserialization step #3
      );
    print('chartDatanewchartDatanew=>${widget.data}');

    return <ColumnSeries<ColumnChartDataModel,String>>[
      ColumnSeries<ColumnChartDataModel,String>(

          /// To apply the column width here.
          width: isCardView ? 0.8 : _columnWidth,/// To apply the spacing betweeen to two columns here.
          spacing: isCardView ? 0.2 : _columnSpacing,animationDuration: 3000,borderRadius: BorderRadius.only(
              topLeft: Radius.circular(2),topRight: Radius.circular(2)),dataSource: chartData,// color: const Color.fromrGBO(252,216,20,1),xValueMapper: (ColumnChartDataModel sales,_) => sales.x,yValueMapper: (ColumnChartDataModel sales,_) => sales.y,dataLabelSettings: DataLabelSettings(
              isVisible: true,labelAlignment: ChartDataLabelAlignment.top,textStyle: TextStyle(fontSize: 10,color: Colors.white)),name: 'In'),ColumnSeries<ColumnChartDataModel,String>(
          dataSource: chartData,width: isCardView ? 0.8 : _columnWidth,spacing: isCardView ? 0.2 : _columnSpacing,// color: const Color.fromrGBO(169,169,_) =>
              sales.secondSeriesYValue,name: 'Out'),// color: const Color.fromrGBO(205,127,50,_) =>
              sales.thirdSeriesYValue,name: 'Stock')
    ];
  }

这个页面是模型数据

模型数据

/// Package import
import 'package:Flutter/material.dart';

/// Base class of the sample's stateful widget class
abstract class ColumnChartModel extends StatefulWidget {
  /// base class constructor of sample's stateful widget class
  const ColumnChartModel({Key key}) : super(key: key);
}

/// Base class of the sample's state class
abstract class ColumnChartModelState extends State<ColumnChartModel> {

  /// Holds the information of current page is card view or not
  bool isCardView;

  @override
  void initState() {
    isCardView = true;
    super.initState();
  }

  /// Get the settings panel content.
  Widget buildSettings(BuildContext context) {
    return null;
  }
}

///Chart sample data
class ColumnChartDataModel {
  /// Holds the datapoint values like x,y,etc.,ColumnChartDataModel(
      this.x,this.y,this.xValue,this.yValue,this.secondSeriesYValue,this.thirdSeriesYValue,this.pointColor,this.size,this.text,this.open,this.close,this.low,this.high,this.volume);

  /// Holds x value of the datapoint
  final dynamic x;

  /// Holds y value of the datapoint
  final num y;

  /// Holds x value of the datapoint
  final dynamic xValue;

  /// Holds y value of the datapoint
  final num yValue;

  /// Holds y value of the datapoint(for 2nd series)
  final num secondSeriesYValue;

  /// Holds y value of the datapoint(for 3nd series)
  final num thirdSeriesYValue;

  /// Holds point color of the datapoint
  final Color pointColor;

  /// Holds size of the datapoint
  final num size;

  /// Holds datalabel/text value mapper of the datapoint
  final String text;

  /// Holds open value of the datapoint
  final num open;

  /// Holds close value of the datapoint
  final num close;

  /// Holds low value of the datapoint
  final num low;

  /// Holds high value of the datapoint
  final num high;

  /// Holds open value of the datapoint
  final num volume;

  // factory ColumnChartDataModel.fromJson(Map<String,dynamic> json) => ColumnChartDataModel(
  //   x: json["x"],//   y: json["y"],//   secondSeriesYValue: json["secondSeriesYValue"],//   thirdSeriesYValue: json["thirdSeriesYValue"],// );

  factory ColumnChartDataModel.fromJson(Map<String,dynamic> parsedJson) {
    return ColumnChartDataModel(
        parsedJson['x'].toString(),parsedJson['y'] as num,parsedJson['secondSeriesYValue'] as num,parsedJson['thirdSeriesYValue'] as num,parsedJson['xValue'] as dynamic,parsedJson['yValue'] as num,parsedJson['pointColor'] as Color,parsedJson['size'] as num,parsedJson['text'] as String,parsedJson['open'] as num,parsedJson['close'] as num,parsedJson['low'] as num,parsedJson['high'] as num,parsedJson['volume'] as num);
  }
}

widget.data == [{productName: abcd-4,totalIn: 10,totalOut: 40,currentStock: 270},{productName: afegwt-10 Pairs,totalIn: 110,totalOut: 80,currentStock: 530}]

widget.title ==“一些文字”

请帮帮我.. 提前致谢。

解决方法

在 json 数据中，键名应该根据创建的数据模型进行匹配。或者你必须分开而不是 .fromJson()。

dart syncfusion-chart