6
votes

charts_flutter étiquettes / texte sur l'axe des x se chevauchant

J'ai rendu le graphique à barres en utilisant le package charts_flutter dans flutter. Mais les étiquettes de domaine sur l'axe des x se chevauchent. Y a-t-il un moyen de résoudre ce problème? Existe-t-il un moyen d'incliner le texte ou d'augmenter la largeur du graphique pour qu'il devienne défilable horizontalement?

J'ai essayé de rechercher des solutions telles que labelspecs mais n’a pas pu trouver de solution. Voici mon code -

double maxheight = .80 * MediaQuery.of(context).size.height;
        var series = [
          new charts.Series(
            domainFn: (BarChartConfig barchartconfig, _) => barchartconfig.name,
            measureFn: (BarChartConfig barchartconfig, _) => barchartconfig.rowcount,
            colorFn: (BarChartConfig barchartconfig, _) => barchartconfig.color,
            id: 'Count',
            data: datacharts,
          )
        ]; 
        var chart = new charts.BarChart(
          series,
          animate: true,
          animationDuration: Duration(seconds: 2),
        );
        return SizedBox(
          height: maxheight,
          child: chart,
        );

flutter dart charts flutter-dependencies google-visualization

2 commentaires

@WhiteHat non, cela ne résout pas mon problème car c'est pour le Web .... J'ai essayé de faire quelque chose de similaire mais cela ne fonctionnera tout simplement pas

child: charts.BarChart (series, animate: true), comment rendre cliquable chaque barre d'un graphique à barres.

3 Réponses :

6
votes

Pourriez-vous publier la fonction de création de votre widget de graphique?

Voici un exemple d'ajustement de la taille de la police via domainAxis -> renderSpec -> labelStyle -> fontSize:

https://google.github.io/charts/flutter/example/axes/custom_font_size_and_color p>

En outre, vous pouvez définir minimumPaddingBetweenLabelsPx: 0 dans l'objet renderSpec pour ajuster le remplissage entre les étiquettes. L'ensemble de la fonction de construction pourrait alors ressembler à ceci:

  @override
  Widget build(BuildContext context) {
    return new charts.BarChart(
      seriesList,
      animate: animate,

      /// Assign a custom style for the domain axis.
      ///
      /// This is an OrdinalAxisSpec to match up with BarChart's default
      /// ordinal domain axis (use NumericAxisSpec or DateTimeAxisSpec for
      /// other charts).
      domainAxis: new charts.OrdinalAxisSpec(
          renderSpec: new charts.SmallTickRendererSpec(
              minimumPaddingBetweenLabelsPx: 0
              // Tick and Label styling here.
              labelStyle: new charts.TextStyleSpec(
                  fontSize: 18, // size in Pts.
                  color: charts.MaterialPalette.black),

              // Change the line colors to match text color.
              lineStyle: new charts.LineStyleSpec(
                  color: charts.MaterialPalette.black))),

      /// Assign a custom style for the measure axis.
      primaryMeasureAxis: new charts.NumericAxisSpec(
          renderSpec: new charts.GridlineRendererSpec(

              // Tick and Label styling here.
              labelStyle: new charts.TextStyleSpec(
                  fontSize: 18, // size in Pts.
                  color: charts.MaterialPalette.black),

              // Change the line colors to match text color.
              lineStyle: new charts.LineStyleSpec(
                  color: charts.MaterialPalette.black))),
    );
  }

0 commentaires

4
votes

Définissez une fenêtre coulissante et fenêtre ordinale

          var chart = charts.BarChart(
                series,
                animate: true,
                domainAxis: new charts.OrdinalAxisSpec(
                    viewport: new charts.OrdinalViewport('AePS', 3),
                ),

                behaviors: [
                    new charts.SeriesLegend(),
                    new charts.SlidingViewport(),
                    new charts.PanAndZoomBehavior(),

                ],
            )

0 commentaires

6
votes

La réponse @ aswani-prakash est bonne,

Si vous voulez que vos étiquettes soient visibles, alors vous pouvez simplement faire pivoter les étiquettes de l'axe des x.

BarChart(
    ...
    domainAxis: charts.OrdinalAxisSpec(
              renderSpec: charts.SmallTickRendererSpec(labelRotation: 60),
       ),
 ),

1 commentaires

child: charts.BarChart (series, animate: true), comment rendre cliquable chaque barre d'un graphique à barres.