flutter - 在 flutter chart 中包裹 x 轴标签 - Overlapping label

Question

如何解决flutter chart标签重叠问题

以及如何去除堆叠条中的边框颜色

 Expanded(
                child: charts.BarChart(
                  _seriesData,
                  barGroupingType: charts.BarGroupingType.stacked,
                  domainAxis: new charts.OrdinalAxisSpec(
                    renderSpec: new charts.SmallTickRendererSpec(
                      labelJustification:
                          charts.TickLabelJustification.outside,
                      // Tick and Label styling here.
                      labelStyle: new charts.TextStyleSpec(
                          fontSize: 9, // size in Pts.
                          color: charts.MaterialPalette.black),

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

Answer 1

您可以使用标签旋转 来防止重叠。

  @override
  Widget build(BuildContext context) {
    var seriesList = _createSampleData(data);

    return charts.BarChart(
      seriesList,
      animate: animate,
      barGroupingType: charts.BarGroupingType.grouped,
      defaultRenderer: charts.BarRendererConfig(cornerStrategy: const charts.ConstCornerStrategy(30)),
      domainAxis: charts.OrdinalAxisSpec(
          renderSpec: charts.SmallTickRendererSpec(
              minimumPaddingBetweenLabelsPx: 0,
              labelAnchor: charts.TickLabelAnchor.centered,
              labelStyle: charts.TextStyleSpec(
                fontSize: 10,
                color: charts.MaterialPalette.black,
              ),
              labelRotation: 60,
              // Change the line colors to match text color.
              lineStyle: charts.LineStyleSpec(color: charts.MaterialPalette.black))),
    );
  }