Question

我正在使用此程序包charts_flutter，并试图给饼图添加彩色边框。我已经看到有一个笔触参数（应该是我正在寻找的参数，因为对此的评论是：/// Stroke color of the border of the arcs.），但它在“初始化程序列表”中，我找不到访问它的方法：

ArcRendererConfig(
      {
...
     })
        this.stroke = StyleFactory.style.arcStrokeColor,
...

是否可以访问它，或通过其他方式为饼图添加边框？这是我的小部件：

charts.PieChart([
      charts.Series<PieEntry, String>(
          domainFn: (PieEntry entry, _) => entry.domain,
          measureFn: (PieEntry entry, _) => entry.measure,
          data: entries,
      )
    ]);

Answer 1

我通过模仿默认的MaterialStyle类创建了自己的Style对象实现。然后，我使用了setter来对其进行全局设置。

步骤1：将chart_common添加到您的pubspec.yaml。

  charts_common: ^0.9.0

从技术上讲，这应该已经存在于您的依赖项中，因为Charts_flutter已使用它，但是为了安全起见，我将其包括在内。

第2步：实现自己的样式类 在此示例中，我将arcStrokeColor更改为自己的黑色版本以匹配背景。我使用了ColorUtil.fromDartColor(Color color)实用程序来传递抖动的Color类。

// ignore: implementation_imports
import 'package:charts_common/src/chart/cartesian/axis/spec/axis_spec.dart' show LineStyleSpec;
// ignore: implementation_imports
import 'package:charts_common/src/common/color.dart' show Color;
// ignore: implementation_imports
import 'package:charts_common/src/common/graphics_factory.dart' show GraphicsFactory;
// ignore: implementation_imports
import 'package:charts_common/src/common/line_style.dart' show LineStyle;
// ignore: implementation_imports
import 'package:charts_common/src/common/style/style.dart' show Style;
// ignore: implementation_imports
import 'package:charts_common/src/common/material_palette.dart' show MaterialPalette;
// ignore: implementation_imports
import 'package:charts_common/src/common/palette.dart' show Palette;
import 'package:charts_flutter/flutter.dart';
import 'package:stonks/consts.dart';


class CustomMaterialStyle implements Style {
  const CustomMaterialStyle();

  @override
  Color get black => MaterialPalette.black;

  @override
  Color get transparent => MaterialPalette.transparent;

  @override
  Color get white => MaterialPalette.white;

  @override
  List<Palette> getOrderedPalettes(int count) =>
      MaterialPalette.getOrderedPalettes(count);

  @override
  LineStyle createAxisLineStyle(
      GraphicsFactory graphicsFactory, LineStyleSpec spec) {
    return graphicsFactory.createLinePaint()
      ..color = spec?.color ?? MaterialPalette.gray.shadeDefault
      ..dashPattern = spec?.dashPattern
      ..strokeWidth = spec?.thickness ?? 1;
  }

  @override
  LineStyle createTickLineStyle(
      GraphicsFactory graphicsFactory, LineStyleSpec spec) {
    return graphicsFactory.createLinePaint()
      ..color = spec?.color ?? MaterialPalette.gray.shadeDefault
      ..dashPattern = spec?.dashPattern
      ..strokeWidth = spec?.thickness ?? 1;
  }

  @override
  int get tickLength => 3;

  @override
  Color get tickColor => MaterialPalette.gray.shade800;

  @override
  LineStyle createGridlineStyle(
      GraphicsFactory graphicsFactory, LineStyleSpec spec) {
    return graphicsFactory.createLinePaint()
      ..color = spec?.color ?? MaterialPalette.gray.shade300
      ..dashPattern = spec?.dashPattern
      ..strokeWidth = spec?.thickness ?? 1;
  }

  @override
  Color get arcLabelOutsideLeaderLine => MaterialPalette.gray.shade600;

  @override
  Color get defaultSeriesColor => MaterialPalette.gray.shadeDefault;

  @override
  Color get arcStrokeColor => ColorUtil.fromDartColor(BLACK);

  @override
  Color get legendEntryTextColor => MaterialPalette.gray.shade800;

  @override
  Color get legendTitleTextColor => MaterialPalette.gray.shade800;

  @override
  Color get linePointHighlighterColor => MaterialPalette.gray.shade600;

  @override
  Color get noDataColor => MaterialPalette.gray.shade200;

  @override
  Color get rangeAnnotationColor => MaterialPalette.gray.shade100;

  @override
  Color get sliderFillColor => MaterialPalette.white;

  @override
  Color get sliderStrokeColor => MaterialPalette.gray.shade600;

  @override
  Color get chartBackgroundColor => MaterialPalette.white;

  @override
  double get rangeBandSize => 0.65;
}

步骤3：在您的主函数中，调用StyleFactory提供的setter函数

void main() {
  StyleFactory.style = CustomMaterialStyle();
  runApp(MyApp());
}

第4步：热重装 您应该看到更改立即生效。如果图书馆最终为我们提供了访问这些成员的正确方法，那就太好了：）

给饼图添加彩色边框

1 个答案: