Я сейчас пытаюсь изменить дизайн макета. Я получил большую часть этого путем проб и ошибок. Единственная часть, которую я не могу понять:
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);
}