时间戳

首页 > 解决方案 > Flutter：Syncfusion图表为y轴提供上限

flutter - Flutter：Syncfusion图表为y轴提供上限

问题描述

我有一个SfCartesianChart显示从 0 到 100 的值列表的折线图，即百分比。但是，当有一个数据点时，例如 99%，y 轴的上限似乎是 120%，这没有任何意义。

这是我的图表代码

       SfCartesianChart(
          margin: EdgeInsets.all(0),
          borderWidth: 0,
          plotAreaBorderWidth: 0,
          title: ChartTitle(text: 'Mood Tracks', textStyle: TextStyle(fontWeight: FontWeight.bold)),
          tooltipBehavior: _tooltipBehavior,
          series: <ChartSeries>[
            LineSeries<MoodRecord, dynamic>(
                name: 'Moods',
                color: Colors.green[400],
                dataSource: records,
                xValueMapper: (MoodRecord record, _) => record.date,
                yValueMapper: (MoodRecord record, _) => record.mood.toInt(),
                dataLabelSettings: DataLabelSettings(isVisible: false),
                enableTooltip: true,
                animationDuration: 2000,
                markerSettings: MarkerSettings(
                    isVisible: true,
                    shape: DataMarkerType.circle,
                    color: kPrimaryColor
                )
              )
          ],
          primaryXAxis: CategoryAxis(
            labelPlacement: LabelPlacement.onTicks,
            labelStyle: TextStyle(fontWeight: FontWeight.bold)
          ),
          primaryYAxis: NumericAxis(
            labelFormat: '{value}%',
            labelStyle: TextStyle(fontWeight: FontWeight.bold)
          ),
        ),

有没有办法在 y 轴上定义一个上限？我不希望我的图表在 y 轴上显示 120% 之类的东西。

如果有更好的方法来显示百分比，也将不胜感激。

标签： flutterlinechartsyncfusion

解决方案

我们查看了问题和代码，可以通知您轴范围由数据源值确定。如果您不希望显示大于 100 的值，请使用轴中的最大值属性并手动自定义范围。有关详细信息，请参阅帮助文档。您还可以使用numberFormat属性来反映百分比值，如下例所示。

https://www.syncfusion.com/kb/11519/how-to-apply-the-currency-format-to-the-axis-labels-sfcartesianchart

对于 100% 堆叠图表，请参阅支持文档，它将给定数据转换为 100%。

推荐阅读