简体   繁体   English

Flutter Charts如何旋转X轴?

[英]Flutter Charts How do I rotate the X axis?

Example Image How can I only rotate the x axis on the bar chart? 示例图像如何仅旋转条形图上的x轴? I used labelRotationAngle to do it with the Kotlin language. 我使用labelRotationAngle来使用Kotlin语言。 Is it possible to do this with Flutter?. Flutter是否可以执行此操作? Thank you for your help. 谢谢您的帮助。

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

U can use the domainAxis with renderSpec to achieve this. U可以将domainAxis与renderSpec配合使用来实现此目的。 Example Code here: 示例代码在这里:

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

45 degree is the best one yet. 45度是最好的。 if u go 90 it will shrink the chart. 如果您转到90,它将缩小图表。 but you can use labelAnchor: charts.TickLabelAnchor.before with labelRotation: -90 to achieve what you want. 但您可以在labelRotation: -90使用labelAnchor: charts.TickLabelAnchor.before 。来实现所需的功能。 Example code: 示例代码:

charts.BarChart(
  seriesList,
  animate: animate,

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

    ),
  ),

)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何旋转 flutter 图表中的文本? - How to rotate text in flutter charts? 如何在颤振中对折线图中的 x 和 y 轴进行排序 - How to sort x and y axis in line charts in flutter 如何在 Google Charts Line Graph 中沿 X 轴的一半结束一条线? - How do I end a line half way along the X axis in Google Charts Line Graph? 如何使用 SwiftUI 中的图表沿 X 轴显示日期? - How do I display dates along X axis using Charts in SwiftUI? 如何在Rational Team Concert仪表板的图表和报告中添加X轴标签? - How do I add in X axis labels on charts and reports in the Rational Team Concert dashboard? 如何使用 Swift 图表创建 x 轴,每天 1 个单位而不是每个数据点 1 个单位? - How do I create an x-axis with Swift Charts with 1 unit per day instead of 1 unit per data point? Charts_flutter:如何使用 Flutter 图表做一个重叠 y 轴 label 的折线图? - charts_flutter: how to do a line chart overlapping y-axis label using Flutter Chart? Flutter:Syncfusion图表如何显式设置要显示的x轴标签数量 - Flutter: Syncfusion charts how to explicitly set number of x axis labels to show 以 x 轴时间为标签的颤动图表时间序列条形图 - flutter charts timeseries bar chart with x axis time as label 如何使用 flutter 和(谷歌)图表旋转垂直条 label 装饰器? - How to rotate vertical-bar label decorators with flutter and (google) charts?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM