flutter 上的 syncfusion 图表包
syncfusion charts package on flutter
我正在使用这个包 syncfusion_flutter_charts: ^18.4.47 提供图表 这是我的代码,我的图表旁边有一个正方形,如图所示
我正在使用这个包 syncfusion_flutter_charts: ^18.4.47 来提供图表这是我的代码,我的图表旁边有一个正方形,如此处的 piccenter 图片描述所示
body: SizedBox(
height: 200,
width: 300,
child: SfCartesianChart(
primaryXAxis: CategoryAxis(
maximumLabelWidth: 80,
),
enableAxisAnimation: true,
// borderColor: yellow,
plotAreaBorderColor: yellow,
plotAreaBackgroundColor: yellow,
series: <ChartSeries<GeluValue, String>>[
BarSeries(
dataSource: <GeluValue>[
GeluValue("السبت", 180),
GeluValue("الاحد", 200),
GeluValue("الاثنين", 160),
GeluValue("الثلاثاء", 70),
GeluValue("الاربعاء", 90),
GeluValue("الخميس", 100),
GeluValue("الجمعة", 70),
],
xAxisName: "days",
yAxisName: "values",
// color: yellow,
animationDuration: 20,
xValueMapper: (GeluValue gelu, _) => gelu.day,
yValueMapper: (GeluValue gelu, _) => gelu.gelu,
)
]),
),
我们想告诉你的是,由于图表是通过绘图形成的小部件,因此RTL不适用于它。您报告的问题可能是由于在您的应用程序中使用委托(例如 GlobalWidgetsLocalizations.delegate)引起的。由于对于阿拉伯语和其他一些语言环境,默认行为是 RTL(从右到左),我们从右端获取位置,图表从那里开始呈现。要解决此问题,您可以使用以下代码段,
Directionality(
textDirection: TextDirection.ltr,
child: SfCartesianChart()
)
通过使用 Directionality 小部件包装我们的图表小部件并将 textDirection 设置为 TextDirection.ltr 将允许从左端呈现图表并希望这将解决您的问题问题。另外,如果您需要图表的镜像,可以通过在各自的轴中使用 opposedPosition 和 isInversed 属性来实现。这里也附上修改后的样例和截图供大家参考,请大家利用。现在渲染的图表看起来像从 RTL(从右到左)渲染。要了解更多关于我们的图表,请参考以下帮助文档。
https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#placing-axes-at-the-opposite-side
样本:https://www.syncfusion.com/downloads/support/directtrac/320174/ze/I320174-arabic-chart499151652
截图
镜像
我正在使用这个包 syncfusion_flutter_charts: ^18.4.47 提供图表 这是我的代码,我的图表旁边有一个正方形,如图所示
body: SizedBox(
height: 200,
width: 300,
child: SfCartesianChart(
primaryXAxis: CategoryAxis(
maximumLabelWidth: 80,
),
enableAxisAnimation: true,
// borderColor: yellow,
plotAreaBorderColor: yellow,
plotAreaBackgroundColor: yellow,
series: <ChartSeries<GeluValue, String>>[
BarSeries(
dataSource: <GeluValue>[
GeluValue("السبت", 180),
GeluValue("الاحد", 200),
GeluValue("الاثنين", 160),
GeluValue("الثلاثاء", 70),
GeluValue("الاربعاء", 90),
GeluValue("الخميس", 100),
GeluValue("الجمعة", 70),
],
xAxisName: "days",
yAxisName: "values",
// color: yellow,
animationDuration: 20,
xValueMapper: (GeluValue gelu, _) => gelu.day,
yValueMapper: (GeluValue gelu, _) => gelu.gelu,
)
]),
),
我们想告诉你的是,由于图表是通过绘图形成的小部件,因此RTL不适用于它。您报告的问题可能是由于在您的应用程序中使用委托(例如 GlobalWidgetsLocalizations.delegate)引起的。由于对于阿拉伯语和其他一些语言环境,默认行为是 RTL(从右到左),我们从右端获取位置,图表从那里开始呈现。要解决此问题,您可以使用以下代码段,
Directionality(
textDirection: TextDirection.ltr,
child: SfCartesianChart()
)
通过使用 Directionality 小部件包装我们的图表小部件并将 textDirection 设置为 TextDirection.ltr 将允许从左端呈现图表并希望这将解决您的问题问题。另外,如果您需要图表的镜像,可以通过在各自的轴中使用 opposedPosition 和 isInversed 属性来实现。这里也附上修改后的样例和截图供大家参考,请大家利用。现在渲染的图表看起来像从 RTL(从右到左)渲染。要了解更多关于我们的图表,请参考以下帮助文档。
https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#placing-axes-at-the-opposite-side
样本:https://www.syncfusion.com/downloads/support/directtrac/320174/ze/I320174-arabic-chart499151652
截图
镜像