如何在折线图x轴颤动中传递字符串参数答案

【问题标题】：How to pass string parameter in line chart x axis flutter如何在折线图x轴颤动中传递字符串参数
【发布时间】：2019-05-31 15:58:11
【问题描述】：

我试图在颤振应用程序中制作折线图，其中 Y 轴作为值（int），X 轴作为日期（字符串），如下图所示，但颤振预定义类不允许我这样做因为当我尝试将字符串作为参数发送时，它会抛出错误说String is not Subtype of int，我是新来的，请帮帮我..

Example which I am trying to do click here.

这就是我想要显示图表的方式。

【问题讨论】：

标签： android dart flutter

【解决方案1】：

因为域轴（x 轴）是天，所以您需要使用 TimeSeriesChart，而不是 LineChart。然后提供tickFormatterSpec 将刻度格式化为星期几。请参阅下面的完整示例：

class SimpleTimeSeriesChart extends StatelessWidget {
  const SimpleTimeSeriesChart(this.seriesList);

  /// Creates a [TimeSeriesChart] with sample data and no transition.
  factory SimpleTimeSeriesChart.withSampleData() {
    return SimpleTimeSeriesChart(
      _createSampleData(),
    );
  }

  final List<charts.Series<TimeSeriesSales, DateTime>> seriesList;

  @override
  Widget build(BuildContext context) => charts.TimeSeriesChart(
        seriesList,
        animate: false,
        dateTimeFactory: const charts.LocalDateTimeFactory(),
        domainAxis: charts.DateTimeAxisSpec(
          tickFormatterSpec: charts.AutoDateTimeTickFormatterSpec(
            day: charts.TimeFormatterSpec(
              format: 'EEE',
              transitionFormat: 'EEE',
            ),
          ),
        ),
      );

  /// Create one series with sample hard coded data.
  static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
    final List<TimeSeriesSales> data = <TimeSeriesSales>[
      TimeSeriesSales(DateTime(2019, 1, 7), 5),
      TimeSeriesSales(DateTime(2019, 1, 8), 25),
      TimeSeriesSales(DateTime(2019, 1, 9), 100),
      TimeSeriesSales(DateTime(2019, 1, 10), 75),
    ];

    return <charts.Series<TimeSeriesSales, DateTime>>[
      charts.Series<TimeSeriesSales, DateTime>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (TimeSeriesSales sales, _) => sales.time,
        measureFn: (TimeSeriesSales sales, _) => sales.sales,
        data: data,
      )
    ];
  }
}

class TimeSeriesSales {
  TimeSeriesSales(this.time, this.sales);

  final DateTime time;
  final int sales;
}

【讨论】：

是的，我尝试更改数据项，但未能调整“系列”，请您帮帮我先生..
请看完全重写的答案。
您的解决方案中的@RichardHeap 是否可以绘制显示给定月份的累计价格？比如说这个月 [ TimeSeriesSales(DateTime(2019, 1, 9), 100), TimeSeriesSales(DateTime(2019, 30, 9), 500), ] 显示刚刚 9 月，价格为 600
我的意思是每月销售额@RichardHeap
如果我有多个值但只有一个值，它就可以工作，图表显示日期不是字符串@RichardHeap

【解决方案2】：

_graphSection(ScreenType type) {
final customTickFormatter =
charts.BasicNumericTickFormatterSpec((num value) {
  if (value == 0) {
    return "Mon";
  } else if (value == 1) {
    return "Tue";
  } else if (value == 2) {
    return "Wed";
  } else if (value == 3) {
    return "Thr";
  } else if (value == 4) {
    return "Fri";
  } else if (value == 5) {
    return "Sat";
  } else if (value == 6) {
    return "Sun";
  }
});

return SizedBox(
  height: 200,
  child: charts.LineChart(
    _createSampleData(),
    defaultRenderer:
    charts.LineRendererConfig(includeArea: true, stacked: true),
    animate: true,
    // Sets up a currency formatter for the measure axis.

    primaryMeasureAxis: new charts.NumericAxisSpec(
      tickProviderSpec:
      new charts.BasicNumericTickProviderSpec(desiredTickCount: 6),
    ),
    domainAxis: charts.NumericAxisSpec(
      tickProviderSpec:
      charts.BasicNumericTickProviderSpec(desiredTickCount: 7),
      tickFormatterSpec: customTickFormatter,
    ),
  ),
);
}

_createSampleData() {
final myFakeDesktopData = [
  new LinearSales(0, 1000),
  new LinearSales(1, 2000),
  new LinearSales(2, 4000),
  new LinearSales(3, 1000),
  new LinearSales(4, 4000),
  new LinearSales(5, 5000),
  new LinearSales(6, 6000),
];

var shadowColor = chartColor.Color(r: 240, g: 246, b: 244, a: 160);
var yellowThemeColor = chartColor.Color.fromHex(code: "#f4e400");

return [
  charts.Series<LinearSales, int>(
    id: 'Cost',
    domainFn: (LinearSales row, _) => row.day,
    measureFn: (LinearSales row, _) => row.sales,
    colorFn: (_, __) => yellowThemeColor,
    areaColorFn: (_, __) => shadowColor,
    data: myFakeDesktopData,
  )
];
}

同样的输出

【讨论】：

谢谢，@Parth Dave！
感谢@Parth Dave

【解决方案3】：

我使用 LineChartData 的titlesData 属性覆盖标题，您可以使用其他属性覆盖另一方的标题：

bottomTitles: SideTitles(
 showTitles: true,
 getTitles: (index) {
 return monthsName[index.toInt()];
}),

包装：

fl_chart: ^0.35.0

虚拟数据：

final List<FlSpot> dummyData1 = List.generate(12, (index) {
return FlSpot(index.toDouble(), index * Random().nextDouble());
});

月份名称列表：

List<String> monthsName = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"June",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];

图表代码：

LineChart(
    LineChartData(
      titlesData: FlTitlesData(
        bottomTitles: SideTitles(
            showTitles: true,
            getTitles: (index) {
              return monthsName[index.toInt()];
            }),
        leftTitles: SideTitles(showTitles: false),
        rightTitles: SideTitles(showTitles: false),
        topTitles: SideTitles(showTitles: false),
      ),
      borderData: FlBorderData(show: false),
      lineBarsData: [
        LineChartBarData(
          spots: dummyData1,
          isCurved: false,
          barWidth: 4,
          colors: [
            Colors.orange,
          ],
        ),
      ],
    ),
),

这肯定会对您有所帮助！享受编程。

【讨论】：