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)

波动图-在折线图上着色和添加轴

1 个答案: