Блог

В настоящее время я пытаюсь изменить дизайн-макет. Я получил большую часть этого методом проб и ошибок. Единственная часть, которую я не могу понять, это:

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

  

У меня нет ответа на все ваши вопросы, но таким образом я смог добавить свои собственные цвета:

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

или полупрозрачный, как этот:

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