Charts 颤振图-在折线图上着色和添加轴

我目前正在尝试重新设计一个设计布局。我通过反复尝试获得了大部分。我唯一不能理解的部分是：

1.）左侧和底部的黑色轴。所以只有那些是黑色的 2.）内部的浅灰色轴。如何在颜色上应用不透明度或使用自己的颜色？我只能使用

图表.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);
}

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

/// 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);
}

这是我目前的代码：

/// 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);
}

///使用破折号模式呈现的折线图示例。
类DashPatternLineChart扩展了无状态小部件{
最终清单系列清单；
最后的布尔动画；
DashPatternLineChart（this.seriesList，{this.animate}）；
///创建带有示例数据且无过渡的[LineChart]。
factory DashPattern折线图。带采样数据（）{
返回新的折线图(
_createSampleData（），
//禁用图像测试的动画。
动画：假，
);
}
@凌驾
小部件构建（构建上下文）{
返回新图表。折线图（系列列表，
动画制作：动画制作，
layoutConfig:charts.layoutConfig(
leftMarginSpec:charts.MarginSpec.fixedPixel（0），
topMarginSpec:charts.MarginSpec.fixedPixel（75），
rightMarginSpec:charts.MarginSpec.fixedPixel（0），
bottomMarginSpec:charts.MarginSpec.fixedPixel（175）
),
垂直轴：错误，
默认交互：false，
domainAxis:新图表。NumericAxisSpec(
renderSpec:charts.GridlineRenderSpec(
lineStyle:charts.LineStyleSpec(
颜色：charts.MaterialPalette.white，
厚度：1，
)
),
tickProviderSpec:新图表。StaticNumerickProviderSpec(
//创建要用于域轴的记号。
[
新图表。TickSpec（0，标签：“0”，样式：charts.TextStyleSpec（fontSize:14）），
新图表。TickSpec（50，标签：“50”，样式：charts.TextStyleSpec（fontSize:14）），
新图表。TickSpec（100，标签：'100'，样式：charts.TextStyleSpec（fontSize:14）），
],
)),
primaryMeasureAxis：新图表。数值轴规范(
renderSpec:charts.GridlineRenderSpec(
labelOffsetFromAxisPx:-20，
labelAnchor:charts.TickLabelAnchor.after，
lineStyle:charts.LineStyleSpec(
颜色：charts.MaterialPalette.transparent，
厚度：0，
)
),
tickProviderSpec:新图表。StaticNumerickProviderSpec(
//创建要用于域轴的记号。
[
新图表。TickSpec（100，标签：“100%”，样式：charts.TextStyleSpec（fontSize:14）），
],
)
));
}
///使用硬编码数据示例创建三个系列。
///使用硬编码数据示例创建三个系列。
静态列表_createSampleData（）{
最终myFakeDesktopData=[
新的LinearSales（0，100），
新的LinearSales（25,85），
新的LinearSales（30,80），
新的LinearSales（45,60），
新的LinearSales（30,40），
新的LinearSales（25,20），
新的LinearSales（0,0），
];
返回[
新图表系列(
id:'桌面'，
颜色fn:（u，uu）=>charts.materialpalete.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，
冲程宽度pxfn:（u，u）=>4，
数据：myFakeDesktopData，
)
];
}
}
///样本线性数据类型。
线性类{
最后一年；
最终销售；
最终int domainUpper=100；
最终int domainLower=0；
最终int测量值上限=100；
最终int测量值下限=0；
LinearSales（今年，今年，销售）；
}

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

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

或者像这样半透明：

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

---

我看起来像一个小时了。。你救了我，孩子。谢谢：+1：