如何使用 Flutter 反转带有 fl_chart 的折线图

Question

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

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

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

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

有什么问题吗？

Answer 1

我的答案

I think either this feature is not readily available in FlCharts yet or not clearly documented.

注意两点：

在任何图表库中，您都无法通过简单地反转数据来反转情节。当你说 reversed dart 只是颠倒了对象添加的顺序，而不一定是列表中任何属性个对象的顺序。特别是你的情况 FlSpots.
要反转绘图，必须翻转要反转绘图的轴。我假设你的情况是 X-axis。如果您检查 flChart 源 here，则有一些逻辑可以计算 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

Here the axis is reversed, but the axis labels are missing. You will have to check this yourselves or raise an issue in their repo.

Answer 2

终于成功了。我曾试图扭转 spots.

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

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

谢谢！！！

如何使用 Flutter 反转带有 fl_chart 的折线图

How to reverse Line chart with fl_chart with Flutter

dart

flutter

fl-chart