flutter 图表 : using double in tick spec

Question

我正在尝试在 flutter 上制作图表，我的数字是小数，但图表 flutter 只允许我使用整体(整数)刻度，这表示我的图表变得非常丑陋。

我已经尝试以多种方式更改我的报价提供者，但它似乎不以任何方式接受双倍报价。

使用这段代码我可以生成一个漂亮的图表，但我只希望我的测量轴介于 3 和 4 之间，我想要 3.1/3.2/3.3。

import 'dart:convert';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:math';

class Graficos extends StatefulWidget {
  @override
  _GraficosState createState() => _GraficosState();
}

class _GraficosState extends State<Graficos> {
  List<charts.Series> seriesList;
  int qteMeses = 6;
  bool baixou = false;
  var jsonData;
  List<LinearSales> dados = List();
  List<double> precos = List();
  double menorPreco = 0;
  double maiorPreco = 0;
  final myController = TextEditingController();
  @override
  void initState() {
    super.initState();

      _Carregar();
     }

   Future<String>  _Carregar( ) async{
    print('local');
   var  response  =  await _funcaoJson();
   if(response.length != null) {
     seriesList = await _pegaDados();
   }
  return 'ok';
     }

  @override
  Widget build(BuildContext context) {
      return Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: jsonData == null ?
        Container(): Column(

          children: <Widget>[

            Container(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              child: new charts.TimeSeriesChart(seriesList,primaryMeasureAxis: new charts.NumericAxisSpec(
                  viewport: new charts.NumericExtents(menorPreco - 0.3, maiorPreco + 0.3), tickProviderSpec:
              new charts.BasicNumericTickProviderSpec(desiredTickCount: 1)), behaviors: [
                new charts.PanAndZoomBehavior(),
                new charts.RangeAnnotation([
                  new charts.RangeAnnotationSegment(new DateTime(int.parse(((jsonData['pesquisa_total'][0]['pesquisas'][qteMeses]['data_publicacao']).toString()).split("\/")[2]),int.parse(((jsonData['pesquisa_total'][0]['pesquisas'][qteMeses]['data_publicacao']).toString()).split("\/")[1]),int.parse(((jsonData['pesquisa_total'][0]['pesquisas'][qteMeses]['data_publicacao']).toString()).split("\/")[0])),
                      new DateTime.now(), charts.RangeAnnotationAxisType.domain),
                  new charts.LineAnnotationSegment(
                      maiorPreco, charts.RangeAnnotationAxisType.measure,
                      endLabel: 'Maior Preco: $maiorPreco',
                      color: charts.MaterialPalette.gray.shade400),
                  new charts.LineAnnotationSegment(
                      menorPreco, charts.RangeAnnotationAxisType.measure,
                      startLabel: 'Menor preco: $menorPreco',
                      color: charts.MaterialPalette.gray.shade400),
                ]),
              ]),
            ),

          ],

        ),
      );




  }

  List<charts.Series<LinearSales, DateTime>> _pegaDados()   {

      montaGrafico();

menorPreco = precos.reduce(min);
maiorPreco = precos.reduce(max);


    return [
      new charts.Series<LinearSales, DateTime>(
        id: 'Preço',
        displayName: 'Preço',
        domainFn: (LinearSales sales, _) => sales.mes,
        measureFn: (LinearSales sales, _) => sales.sales,
        data: dados,

      )
    ];
  }

Future<void> montaGrafico() async {

for(var i = qteMeses; i >= 0; i--){

     dados.add(
      LinearSales(new DateTime(int.parse(((jsonData['pesquisa_total'][0]['pesquisas'][i]['data_publicacao']).toString()).split("\/")[2]),int.parse(((jsonData['pesquisa_total'][0]['pesquisas'][i]['data_publicacao']).toString()).split("\/")[1]),int.parse(((jsonData['pesquisa_total'][0]['pesquisas'][i]['data_publicacao']).toString()).split("\/")[0])), double.parse((jsonData['pesquisa_total'][0]['pesquisas'][i]['items'][0]['ranking'][0]['preco'].toString()).replaceAll(',', '.'))),
    );
    print(int.parse(((jsonData['pesquisa_total'][0]['pesquisas'][i]['data_publicacao']).toString()).split("\/")[0])); 
    precos.add(double.parse((jsonData['pesquisa_total'][0]['pesquisas'][i]['items'][0]['ranking'][0]['preco'].toString()).replaceAll(',', '.')));
  }



}

  var aux;
  Future<String> _funcaoJson() async {
    var data = await http.get(
        'My secret http');

    setState(() {

      jsonData = jsonDecode(data.body);

    });

    return 'Sucesso';
  }
}
class LinearSales {
  final DateTime mes;
  final double sales;

  LinearSales(this.mes, this.sales);
}
´´´

Answer 1

我发现了一些内容，这些内容可能会让看到此答案的人感兴趣。要在轴上显示双倍，您可以这样做:

在您的 TimeSeriesChart() 小部件中:

TimeSeriesChart(
      primaryMeasureAxis: new charts.NumericAxisSpec(
           tickProviderSpec: new charts.StaticNumericTickProviderSpec(
               _createTickSpec(),
           ),
      ),
),

然后你可以创建一个函数 _createTickSpec() :

List<charts.TickSpec<num>> _createTickSpec() {
    List<charts.TickSpec<num>> _tickProvidSpecs = new List<charts.TickSpec<num>>();
    double d = minVal;
    while (d <= maxVal) {
        _tickProvidSpecs.add(new charts.TickSpec(d,
            label: '$d%', style: charts.TextStyleSpec(fontSize: 14)));
        d += 0.1;
    }
}