Flutter Charts 如何旋转 X 轴？

【问题标题】：Flutter Charts How do I rotate the X axis?Flutter Charts 如何旋转 X 轴？
【发布时间】：2019-03-23 23:43:12
【问题描述】：

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,
      )
    ]
}

【问题讨论】：

垂直创建完成了吗？只剩下旋转了？

标签： charts flutter

【解决方案1】：

你可以使用 domainAxis 和 renderSpec 来实现这一点。示例代码在这里：

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

45 度是最好的。如果你去 90 它会缩小图表。但你可以使用labelAnchor: charts.TickLabelAnchor.before 和labelRotation: -90 来实现你想要的。示例代码：

charts.BarChart(
  seriesList,
  animate: animate,

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

    ),
  ),

)

【讨论】：