我正在使用以下代码段绘制一些实时时间序列折线图:

  new SizedBox(
    height: MediaQuery.of(context).size.height / 4,
    child: new charts.TimeSeriesChart([
      new charts.Series<HistoryData, DateTime>(
          id: 'test',
          colorFn: (_, __) => colourArray[dataArrayName],
          data: dataArray,
          domainFn: (HistoryData sales, _) => sales.date,
          measureFn: (HistoryData sales, _) => sales.historyValue)
    ],
        animate: true,
        dateTimeFactory: const charts.LocalDateTimeFactory()),
  )

class HistoryData {
  final DateTime date;
  final double historyValue;

  HistoryData(this.date, this.historyValue);
}

数据显示正常,但我注意到只有一个 x 轴标签:

dart - charts_flutter - 如何设置 x 轴刻度上的间隔-LMLPHP

我想知道是否有人可以帮助我弄清楚如何制作它,以便在 x 轴上有许多均匀分布的刻度。

谢谢

编辑:dataArrayList<HistoryData> 类型的变量

这是打印品:
I/flutter (19864): [Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryData', Instance of 'HistoryDat...
这个 HistoryData 中有 60 个 List 对象,每个 date 中的每个 HistoryData 值彼此相隔 2 秒。

最佳答案

charts.TimeSeriesChart(
    _createSampleData(),
    animate: true,
    domainAxis: new charts.DateTimeAxisSpec(
      tickProviderSpec: charts.DayTickProviderSpec(increments: [1]),
      tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec(
        day: new charts.TimeFormatterSpec(
            format: 'EEE', transitionFormat: 'EEE', noonFormat: 'EEE'),
      ),
      showAxisLine: false,
    ),
  ),

此行设置要在域或底轴上显示刻度的数量
tickProviderSpec: charts.DayTickProviderSpec(increments: [1]),

将增量更改为 2 和 3 并检查输出

关于dart - charts_flutter - 如何设置 x 轴刻度上的间隔,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52885370/

10-10 07:39