我在flutter中使用charts_flutter包渲染了条形图。但x轴上的域标签相互重叠。有没有办法解决这个问题?有没有办法可以倾斜文本或增加图表的宽度,使其成为可水平滚动的?
我一直试图寻找像labelspecs这样的解决方案但无法达成解决方案。这是我的代码 -
double maxheight = .80 * MediaQuery.of(context).size.height;
var series = [
new charts.Series(
domainFn: (BarChartConfig barchartconfig, _) => barchartconfig.name,
measureFn: (BarChartConfig barchartconfig, _) => barchartconfig.rowcount,
colorFn: (BarChartConfig barchartconfig, _) => barchartconfig.color,
id: 'Count',
data: datacharts,
)
];
var chart = new charts.BarChart(
series,
animate: true,
animationDuration: Duration(seconds: 2),
);
return SizedBox(
height: maxheight,
child: chart,
);
你可以发布图表小部件的构建功能吗?
这是通过domainAxis调整字体大小的示例 - > renderSpec - > labelStyle - > fontSize:
https://google.github.io/charts/flutter/example/axes/custom_font_size_and_color
此外,您可以在renderSpec对象中设置minimumPaddingBetweenLabelsPx: 0
以调整标签之间的填充。整个构建函数可能看起来像这样:
@override
Widget build(BuildContext context) {
return new charts.BarChart(
seriesList,
animate: animate,
/// Assign a custom style for the domain axis.
///
/// This is an OrdinalAxisSpec to match up with BarChart's default
/// ordinal domain axis (use NumericAxisSpec or DateTimeAxisSpec for
/// other charts).
domainAxis: new charts.OrdinalAxisSpec(
renderSpec: new charts.SmallTickRendererSpec(
minimumPaddingBetweenLabelsPx: 0
// Tick and Label styling here.
labelStyle: new charts.TextStyleSpec(
fontSize: 18, // size in Pts.
color: charts.MaterialPalette.black),
// Change the line colors to match text color.
lineStyle: new charts.LineStyleSpec(
color: charts.MaterialPalette.black))),
/// Assign a custom style for the measure axis.
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: new charts.GridlineRendererSpec(
// Tick and Label styling here.
labelStyle: new charts.TextStyleSpec(
fontSize: 18, // size in Pts.
color: charts.MaterialPalette.black),
// Change the line colors to match text color.
lineStyle: new charts.LineStyleSpec(
color: charts.MaterialPalette.black))),
);
}
设置sliding viewport和ordinal viewport
var chart = charts.BarChart(
series,
animate: true,
domainAxis: new charts.OrdinalAxisSpec(
viewport: new charts.OrdinalViewport('AePS', 3),
),
behaviors: [
new charts.SeriesLegend(),
new charts.SlidingViewport(),
new charts.PanAndZoomBehavior(),
],
)