时间戳

首页 > 解决方案 > 为饼图添加彩色边框

user-interface - 为饼图添加彩色边框

问题描述

我正在使用这个包charts_flutter并且我试图给我的饼图一个彩色边框。我已经看到有一个 stroke 参数（这应该是我正在寻找的，因为关于这个的评论是：） /// 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,
      )
    ]);

标签： user-interfaceflutterchartsinitializer

解决方案

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

第 1 步：将 charts_common 添加到您的 pubspec.yaml。

  charts_common: ^0.9.0

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

第 2 步：实现您自己的 Style 类 在本例中，我将其更改arcStrokeColor为我自己的黑色版本以匹配背景。我使用该ColorUtil.fromDartColor(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;
}

第三步：在你的main函数中，调用StyleFactory提供的setter函数

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

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

推荐阅读