如何在颤动图中设置 y 轴上的间隔？答案

【问题标题】：How to set interval on y-axis in flutter charts?如何在颤动图中设置 y 轴上的间隔？
【发布时间】：2021-04-18 07:10:58
【问题描述】：

这是我的代码。我有一个范围从 110 到 130 的图表。我需要将我的 y 轴设置为 100-140 而不是 0-140。那里的任何人，请帮助我。我在下面附上了我的代码。我是 Flutter 的新手。我使用了所需的 tickcount 属性，但对我没有帮助。有没有办法不仅为 y 轴设置边界，还为两个轴设置边界。

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

class SimpleTimeSeriesChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  SimpleTimeSeriesChart(this.seriesList, {this.animate});

  @override
  Widget build(BuildContext context) {
    return new charts.TimeSeriesChart(
      seriesList,
      animate: animate,
      dateTimeFactory: const charts.LocalDateTimeFactory(),
      behaviors: [
        charts.SlidingViewport(
          charts.SelectionModelType.action,
        ),
        charts.PanBehavior(),
      ],
      primaryMeasureAxis: new charts.NumericAxisSpec(
        tickProviderSpec: new charts.BasicNumericTickProviderSpec(
          desiredTickCount: 10,
        ),
      ),
    );
  }
  static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
    List<TimeSeriesSales> data1 = [];
    List<TimeSeriesSales> data2 = [];
    var index = 0;
    for (var item in DataMarket) {
      data1.insert(index++, TimeSeriesSales(item['date'], item['market']));
    }
    index = 0;
    for (var item in DataMarket) {
      data2.insert(index++, TimeSeriesSales(item['date'], item['NAV']));
    }
    print(data1);
    return [
      new charts.Series<TimeSeriesSales, DateTime>(
        id: 'Sales1',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (TimeSeriesSales sales, _) => sales.time,
        measureFn: (TimeSeriesSales sales, _) => sales.sales,
        measureLowerBoundFn: (TimeSeriesSales sales, _) => sales.sales - 5,
        measureUpperBoundFn: (TimeSeriesSales sales, _) => sales.sales + 5,
        data: data1,
      ),
      new charts.Series<TimeSeriesSales, DateTime>(
        id: 'Sales2',
        colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
        domainFn: (TimeSeriesSales sales, _) => sales.time,
        measureFn: (TimeSeriesSales sales, _) => sales.sales,
        data: data2,
      )
    ];
  }
}

/// Sample time series data type.
class TimeSeriesSales {
  final DateTime time;
  final double sales;

  TimeSeriesSales(this.time, this.sales);
}

【问题讨论】：

标签： flutter charts

【解决方案1】：

将此属性添加到您的图表中：

primaryMeasureAxis: new charts.NumericAxisSpec(tickProviderSpec:
                new charts.BasicNumericTickProviderSpec(zeroBound: false))

完整示例：

charts.LineChart(seriesList,primaryMeasureAxis: charts.NumericAxisSpec(
                 tickProviderSpec:charts.BasicNumericTickProviderSpec(zeroBound: false)))

【讨论】：