Flutter Charts如何旋转X轴?

时间:2019-03-23 23:43:13

标签: charts flutter

Example Image如何仅旋转条形图上的x轴? 我使用labelRotationAngle来使用Kotlin语言。 Flutter是否可以执行此操作?谢谢您的帮助。

Rotate

 charts.BarChart(
   _createDataForChart(key, city_name),
   animate: true,
   behaviors: [new charts.PanAndZoomBehavior()],,
   )
List<charts.Series<priceChart,String>> _createDataForChart(key, city_name){
return [
      new charts.Series<priceChart, String>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (priceChart sales, _) => sales.date,
        measureFn: (priceChart sales, _) => sales.price,
        data: data,
      )
    ]
}

1 个答案:

答案 0 :(得分:1)

U可以将domainAxis与renderSpec配合使用来实现此目的。示例代码在这里:

charts.BarChart(
  seriesList,
  animate: animate,
  domainAxis: new charts.OrdinalAxisSpec(
    renderSpec: charts.SmallTickRendererSpec(
      //
      // Rotation Here, 
      labelRotation: 45,
    ),
  ),
)

45度是最好的。如果您转到90,它将缩小图表。但是您可以将labelAnchor: charts.TickLabelAnchor.beforelabelRotation: -90结合使用以实现所需的功能。示例代码:

charts.BarChart(
  seriesList,
  animate: animate,

  domainAxis: new charts.OrdinalAxisSpec(
    renderSpec: charts.SmallTickRendererSpec(
      // Rotation Here,
      labelRotation: -90,
      labelAnchor: charts.TickLabelAnchor.before,

    ),
  ),

)