Question

如何解决波动图中的标签重叠问题

以及如何删除堆叠栏中的边框颜色

 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

您可以使用 labelRotation 来防止重叠。

  @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))),
    );
  }

Answer 2

签出：https://stackoverflow.com/a/57201589/11551638

var chart = charts.BarChart(
                series,
                animate: true,
/// 1- add this to have a default zoom in to solve the overlapping plus No. 2(down)

                domainAxis: new charts.OrdinalAxisSpec(
                    viewport: new charts.OrdinalViewport('AePS', 3),
                ),
                behaviors: [

                    new charts.SeriesLegend(),
/// 2- also for dealing with a lot of data specially for real-time graphs to scroll on the graph and more zoom in function
                    new charts.SlidingViewport(),
                    new charts.PanAndZoomBehavior(),
                ],
            )

我的代码：

          Expanded(
            child: charts.BarChart
            (_seriesBarData,
                animate: true,
                animationDuration: Duration(seconds:2),
              domainAxis: new charts.OrdinalAxisSpec(
                viewport: new charts.OrdinalViewport('AePS', 9),
              ),
                 behaviors: [
                   new charts.SlidingViewport(),
                   new charts.PanAndZoomBehavior(),
                   new charts.SeriesLegend(
                     entryTextStyle: charts.TextStyleSpec(
                        color: charts.MaterialPalette.black,
                        fontFamily: 'Normal',
                        fontSize: 15),
                   ),

Answer 3

这将解决白色边框问题：

defaultRenderer: charts.BarRendererConfig(
    groupingType: charts.BarGroupingType.stacked,
    strokeWidthPx: 2.0,
),

对于标签问题，您可以考虑轮换使用，在以下版本中，添加的labelRotation会有所帮助。认为90会缩小图表：/

charts_flutter: ^0.8.1

Answer 4

由于“ charts_flutter”存在许多配置和性能问题。我决定转到流行的网络图书馆图表flutter_echarts，该图表利用了webview_flutter及其开放源代码惊人的图书馆以及更多的配置选项。我纯粹是出于配置问题，我一直认为这可能会影响性能问题（由于整个webview概念），但是幸运的是我没有。强烈建议您检查一下。

注意：从数据结构的角度来看，此更改并不容易，因为echart的配置采用字符串形式，并且对数据分组使用不同的方法。但就我而言，这值得我度过所有的时间:)

将x轴标签包裹在扑动图中-重叠标签

4 个答案: