flutter - 如何使用 Flutter 反转折线图和 fl_chart

Question

我试图按里程（公里）对列表顺序进行排序。它是成功的。原因图表是相同的方向。(20 -> 7 -> 13)

但我想反转折线图。（13 -> 7 -> 20）按日期排序。所以我写了以下代码。

    LineChartBarData(
          spots: spots.reversed.toList()
    )

但它不像下图那样工作。在我的调试器中，列表肯定是颠倒的。

它有什么问题？

Answer 1

我的答案

我认为此功能在 FlCharts 中尚不可用，或者没有明确记录。

有两点需要注意：

1. 在任何图表库中，您都无法通过简单地反转数据来反转绘图。当您说反向飞镖只是颠倒添加对象的顺序时，不一定是列表中对象的任何属性。特别是在你的情况下FlSpots。
2. 对于要反转的绘图，必须翻转要反转绘图的轴。我假设在你的情况下这是X-axis. 如果您在此处查看 flChart 源，则有一些逻辑可以计算 minX 和 maxX，然后将其用于轴。这可能是我假设和测试的技巧，最终没有轴标签。

由于您没有共享代码，因此我正在使用他们文档中的示例之一。检查以下代码和结果。

 LineChartData mainData() {
    return LineChartData(
      gridData: FlGridData(
        show: true,
        drawVerticalLine: true,
        getDrawingHorizontalLine: (value) {
          return FlLine(
            color: const Color(0xff37434d),
            strokeWidth: 1,
          );
        },
        getDrawingVerticalLine: (value) {
          return FlLine(
            color: const Color(0xff37434d),
            strokeWidth: 1,
          );
        },
      ),
      titlesData: FlTitlesData(
        show: true,
        bottomTitles: SideTitles(
          showTitles: true,
          reservedSize: 22,
          textStyle: const TextStyle(
              color: Color(0xff68737d),
              fontWeight: FontWeight.bold,
              fontSize: 16),

          margin: 8,
        ),
        leftTitles: SideTitles(
          showTitles: true,
          textStyle: const TextStyle(
            color: Color(0xff67727d),
            fontWeight: FontWeight.bold,
            fontSize: 15,
          ),
          getTitles: (value) {
            switch (value.toInt()) {
              case 1:
                return '10k';
              case 3:
                return '30k';
              case 5:
                return '50k';
            }
            return '';
          },
          reservedSize: 28,
          margin: 12,
        ),
      ),
      borderData: FlBorderData(
          show: true,
          border: Border.all(color: const Color(0xff37434d), width: 1)),
      minX: 11,
      maxX: 0,
      minY: 0,
      maxY: 6,
      lineBarsData: [
        LineChartBarData(
          spots: [
            FlSpot(0, 3),
            FlSpot(2.6, 2),
            FlSpot(4.9, 5),
            FlSpot(6.8, 3.1),
            FlSpot(8, 4),
            FlSpot(9.5, 3),
            FlSpot(11, 4),
          ],
          isCurved: true,
          barWidth: 5,
          isStrokeCapRound: true, 
        ),
      ],
    );
  }

minX: 0和_maxX:11

minX: 11和_maxX:0

这里轴是颠倒的，但是轴标签丢失了。您将不得不自己检查或在他们的回购中提出问题。

Answer 2

最后我让它工作了。我曾试图扭转spots。

但是我改变主意只反转ListView。

ListView(
  children: fuelComponents.reversed.toList(),
),

谢谢！！！