chart_flutter-如何在x轴刻度上设置间隔 [英] charts_flutter - How to set the interval on x axis ticks

问题描述

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

I'm plotting a few live time series line charts using the following snippet:

  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轴标签：

The data displays fine but I've noticed that there is only one x axis labels:

我想知道是否有人可以帮助我弄清楚如何做到这一点，以便在x轴上有许多均匀间隔的刻度。

I was wondering if anyone could help me figure out how to make it so there are many evenly spaced ticks on the x axis.

谢谢

编辑： dataArray 是 List< HistoryData>

这是印刷品：

I / flutter（19864）：[HistoryData的实例，HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData， HistoryData的实例， HistoryData的实例，Inst HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例， HistoryData的实例'，'HistoryData'的实例，'HistoryData'的实例，'HistoryData'的实例，'HistoryData'的实例，'HistoryData'的实例，'HistoryData'的实例，'HistoryData'的实例，'HistoryDat的实例。 。

此列表中有60个 HistoryData 对象和每个 HistoryData 中的每个日期彼此相距2秒。

There are 60 HistoryData objects in this List and each date value in each HistoryData is 2 seconds apart from each other.

推荐答案

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,
    ),
  ),

此行设置您要在域或底轴上显示刻度的增量

this line sets how much inrement you want to show ticks on domain or bottom axis

tickProviderSpec: charts.DayTickProviderSpec(increments: [1]),

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

change increments to 2 and 3 and check the output

这篇关于chart_flutter-如何在x轴刻度上设置间隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！