在 Flutter 中更改折线图轴设置

Question

目前正在开发涉及使用 fl_charts 依赖项的应用程序。

              return Container(
                padding: EdgeInsets.all(10),
                width: double.infinity,
                height: 200,
                child: LineChart(

                  LineChartData(
                      borderData: FlBorderData(show: false),
                      lineBarsData: [
                      LineChartBarData(spots: [
                      FlSpot(0, double.parse(yParam[0])),
                      FlSpot(1, double.parse(yParam[1])),
                      FlSpot(2, double.parse(yParam[2])),
                      FlSpot(3, double.parse(yParam[3])),
                      FlSpot(4, double.parse(yParam[4])),
                      FlSpot(5, double.parse(yParam[5])),
                      FlSpot(6, double.parse(yParam[6])),
                      FlSpot(7, double.parse(yParam[7])),
                      FlSpot(8, double.parse(yParam[8])),
                      FlSpot(9, double.parse(yParam[9])),
                      FlSpot(10, double.parse(yParam[10])),
                      FlSpot(11, double.parse(yParam[11])),
                      FlSpot(12, double.parse(yParam[12])),
                    ],
                      color: Colors.red,)
                  ]),
                ),
              );

如图所示，图表的 x 轴标签显示不正确。我想删除顶部的 x 轴标签，只显示旋转 60 度的底部标签。

我查看了参考资料，但似乎这些属性不存在，或者我找不到插入正确内容的位置。

图表数据正在从 Firebase 数据库流入并通过 streambuilder 元素进行更新。

非常感谢！

编辑：感谢下面的托盘，我找到了答案

              return Container(
                padding: EdgeInsets.all(10),
                width: double.infinity,
                height: 200,
                child: LineChart(

                  LineChartData(
                      borderData: FlBorderData(show: false),
                      lineBarsData: [
                      LineChartBarData(spots: [
                      FlSpot(0, double.parse(yParam[0])),
                      FlSpot(1, double.parse(yParam[1])),
                      FlSpot(2, double.parse(yParam[2])),
                      FlSpot(3, double.parse(yParam[3])),
                      FlSpot(4, double.parse(yParam[4])),
                      FlSpot(5, double.parse(yParam[5])),
                      FlSpot(6, double.parse(yParam[6])),
                      FlSpot(7, double.parse(yParam[7])),
                      FlSpot(8, double.parse(yParam[8])),
                      FlSpot(9, double.parse(yParam[9])),
                      FlSpot(10, double.parse(yParam[10])),
                      FlSpot(11, double.parse(yParam[11])),
                      FlSpot(12, double.parse(yParam[12])),
                    ],
                      color: Colors.red,
                      )
                  ],
                    titlesData: FlTitlesData(
                    topTitles: AxisTitles(
                      sideTitles: SideTitles(showTitles: false),
                    ),
                    rightTitles: AxisTitles(
                      sideTitles: SideTitles(showTitles: false),
                    ),
                    bottomTitles: AxisTitles(
                      sideTitles: SideTitles(showTitles: true, reservedSize: 30),
                      ),
                    leftTitles: AxisTitles(
                      sideTitles: SideTitles(showTitles: true, reservedSize: 30),
                      ),
                      
                  ),
                  ),
                ),
              );

Answer 1

查看 https://github.com/imaNNeoFighT/fl_chart/blob/3f1a6aee638bb89a4a5ff9097737a74e116e4778/example/lib/line_chart/samples/line_chart_sample7.dart#L168 可能有一个名为“topTitles”的属性。您可以尝试将其设置为 false。

在 Flutter 中更改折线图轴设置

Change Line Chart Axis Settings in Flutter

formatting

linechart

dart

flutter