0

这是 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 == "一些文字"

请帮助我.. 提前谢谢。

4

1 回答 1

0

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

于 2021-04-01T03:20:41.070 回答