flutter - 如何在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.

需要注意的两件事:

在任何图表库中，您都不能仅通过反转数据来反转绘图。当您说反转时，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.