Диаграмма SfCartesianChart не отображается после обновления данных из json в dart

Question

Это SfCartesianChart, и я хочу сделать его динамическим в соответствии с остальными данными API, приведенными ниже, но когда я помещаю в него динамические данные, график показывает только null в тексте легенды и никаких данных, но я опубликовал необходимые данные. Пожалуйста, помогите мне, правильно это или нет.

      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, 1.0),
        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,
          animationDuration: 3000,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(2), topRight: Radius.circular(2)),
          // color: const Color.fromRGBO(169, 169, 169, 1),
          xValueMapper: (ColumnChartDataModel sales, _) => sales.x,
          yValueMapper: (ColumnChartDataModel sales, _) =>
              sales.secondSeriesYValue,
          dataLabelSettings: DataLabelSettings(
              isVisible: true,
              labelAlignment: ChartDataLabelAlignment.top,
              textStyle: TextStyle(fontSize: 10, color: Colors.white)),
          name: 'Out'),
      ColumnSeries<ColumnChartDataModel, String>(
          dataSource: chartData,
          width: isCardView ? 0.8 : _columnWidth,
          spacing: isCardView ? 0.2 : _columnSpacing,
          animationDuration: 3000,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(2), topRight: Radius.circular(2)),
          // color: const Color.fromRGBO(205, 127, 50, 1),
          xValueMapper: (ColumnChartDataModel sales, _) => sales.x,
          yValueMapper: (ColumnChartDataModel sales, _) =>
              sales.thirdSeriesYValue,
          dataLabelSettings: DataLabelSettings(
              isVisible: true,
              labelAlignment: ChartDataLabelAlignment.top,
              textStyle: TextStyle(fontSize: 10, color: Colors.white)),
          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 == "какой-то текст"

Помогите, пожалуйста .. Заранее спасибо.

Answer 1

В данных json имена ключей должны сопоставляться в соответствии с созданной моделью данных. или вам нужно поставить отдельный вместо .fromJson().