Flutter Charts - 在线图上着色和添加轴

Question

我目前正在尝试重新设计设计布局。我通过尝试和错误得到了大部分。我唯一不明白的部分是：

1.) 左侧和底部的黑色轴。所以只有那些是黑色的 2.) 里面的浅灰色轴。如何在颜色上应用不透明度或使用我自己的颜色？我只能使用charts.MaterialPalette，但不知道如何定义自己的。3.) 还有如何在中间添加浅灰色轴。我只拿到了垂直的。4.) 有没有办法为线条添加圆角半径？

这就是现在的样子：

这就是我想要实现的目标：

到目前为止，这是我的代码：

/// Example of a line chart rendered with dash patterns.
class DashPatternLineChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  DashPatternLineChart(this.seriesList, {this.animate});

  /// Creates a [LineChart] with sample data and no transition.
  factory DashPatternLineChart.withSampleData() {
    return new DashPatternLineChart(
      _createSampleData(),
      // Disable animations for image tests.
      animate: false,
    );
  }


  @override
  Widget build(BuildContext context) {
    return new charts.LineChart(seriesList,
        animate: animate,
        layoutConfig: charts.LayoutConfig(
            leftMarginSpec: charts.MarginSpec.fixedPixel(0),
            topMarginSpec: charts.MarginSpec.fixedPixel(75),
            rightMarginSpec: charts.MarginSpec.fixedPixel(0),
            bottomMarginSpec: charts.MarginSpec.fixedPixel(175)
        ),
        flipVerticalAxis: false,
        defaultInteractions: false,
        domainAxis: new charts.NumericAxisSpec(
            renderSpec: charts.GridlineRendererSpec(
                lineStyle: charts.LineStyleSpec(
                  color: charts.MaterialPalette.white,
                  thickness: 1,
                )
            ),
            tickProviderSpec: new charts.StaticNumericTickProviderSpec(
              // Create the ticks to be used the domain axis.
              <charts.TickSpec<num>>[
                new charts.TickSpec(0, label: '0', style: charts.TextStyleSpec(fontSize: 14)),
                new charts.TickSpec(50, label: '50', style: charts.TextStyleSpec(fontSize: 14)),
                new charts.TickSpec(100, label: '100', style: charts.TextStyleSpec(fontSize: 14)),
              ],
            )),
        primaryMeasureAxis: new charts.NumericAxisSpec(
            renderSpec: charts.GridlineRendererSpec(
                labelOffsetFromAxisPx: -20,
                labelAnchor: charts.TickLabelAnchor.after,
                lineStyle: charts.LineStyleSpec(
                  color: charts.MaterialPalette.transparent,
                  thickness: 0,
                )
            ),
            tickProviderSpec: new charts.StaticNumericTickProviderSpec(
              // Create the ticks to be used the domain axis.
              <charts.TickSpec<num>>[
                new charts.TickSpec(100, label: '100%', style: charts.TextStyleSpec(fontSize: 14)),
              ],
            )
        ));
  }

  /// Create three series with sample hard coded data.
  /// Create three series with sample hard coded data.
  static List<charts.Series<LinearSales, int>> _createSampleData() {
    final myFakeDesktopData = [
      new LinearSales(0, 100),
      new LinearSales(25, 85),
      new LinearSales(30, 80),
      new LinearSales(45, 60),
      new LinearSales(30, 40),
      new LinearSales(25, 20),
      new LinearSales(0, 0),
    ];

    return [
      new charts.Series<LinearSales, int>(
        id: 'Desktop',
        colorFn: (_, __) => charts.MaterialPalette.white,
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        domainUpperBoundFn: (LinearSales sales, _) => sales.domainUpper,
        domainLowerBoundFn: (LinearSales sales, _) => sales.domainLower,
        measureUpperBoundFn: (LinearSales sales, _) => sales.measureUpper,
        measureLowerBoundFn: (LinearSales sales, _) => sales.measureLower,
        strokeWidthPxFn: (_, __) => 4,
        data: myFakeDesktopData,
      )
    ];
  }
}

/// Sample linear data type.
class LinearSales {
  final int year;
  final int sales;

  final int domainUpper = 100;
  final int domainLower = 0;

  final int measureUpper = 100;
  final int measureLower = 0;

  LinearSales(this.year, this.sales);
}

Answer 1

我无法回答您所有的问题，但我可以通过这种方式提供我自己的颜色：

charts.Color.fromHex(code: "#ff0000")

或像这样半透明：

charts.Color(r: 255, g: 0, b: 0, a: 128)