时间戳

首页 > 解决方案 > 如何使用颤振和（谷歌）图表旋转垂直条标签装饰器？

flutter - 如何使用颤振和（谷歌）图表旋转垂直条标签装饰器？

问题描述

我想将条形图标签装饰器旋转90 度。

在我的颤振应用程序中，我绘制了一个简单的每日金额垂直条形图（使用charts_flutter 0.10.0），在数字 y 轴和序数 x 轴上都有标签。

这些轴标签可以使用labelRotation. 垂直条也都有“条形标签装饰器”标签，显示精确的图形数量——但由于尺寸限制和产生的窄条，标签装饰器溢出。

带有溢出条形标签装饰器的charts_flutter条形图

我需要将这些条形装饰器标签旋转 90 度，因此它们与每个条形的长轴方向相同，从而允许标签文本适合 -但无法弄清楚如何。

与 和 的轴标签不同，primaryMeasureAxis在它们domainAxis的labelRotation属性中，条形标签装饰器除了简单的文本样式（ fontFamily、fontSize、lineHeight、color、fontWeight）或标签位置行为renderSpec之外似乎没有任何选择。BarLabelDecorator

BarLabelDecorator我的猜测是，如果没有更新以提供rotate选项，目前这是不可能的。我希望我错了！

Widget build(BuildContext context) {

  charts.NumericAxisSpec yAxisStyling = charts.NumericAxisSpec(
      renderSpec: charts.GridlineRendererSpec(
        labelStyle: charts.TextStyleSpec(
            fontSize: 12,
            color: charts.ColorUtil.fromDartColor(Colors.grey.shade500),
        ),
        lineStyle: new charts.LineStyleSpec(
            color: charts.ColorUtil.fromDartColor(Colors.grey.shade400)),
    )
  );

  charts.OrdinalAxisSpec xAxisStyling = charts.OrdinalAxisSpec(
    renderSpec: charts.GridlineRendererSpec(
      labelStyle: charts.TextStyleSpec(
        fontSize: 12,
        color: charts.ColorUtil.fromDartColor(Colors.grey.shade500),
      ),
      // labelRotation: 90, // <- just an example / don't need these rotated
      lineStyle: new charts.LineStyleSpec(color: charts.MaterialPalette.transparent),
    ),
    showAxisLine: false,  // doesn't seem to work on it's own - need above 'transparent' line
  );

  return new charts.BarChart(
    seriesList,
    animate: animate,
    vertical: true,
    // Set a bar label decorator.
    //          insideLabelStyleSpec: new charts.TextStyleSpec(),
    //          outsideLabelStyleSpec: new charts.TextStyleSpec(...)),
    barRendererDecorator: new charts.BarLabelDecorator<String>(), // <- ? no rotate property
    primaryMeasureAxis: yAxisStyling,
    domainAxis: xAxisStyling,
  );
}

标签： flutterdartchartsgoogle-visualization

解决方案

万一还有人在看...

虽然（目前）没有办法通过谷歌图表颤振包的公开发布来实现这一点，但这个回答“有没有办法将标签文本垂直放置在颤振图表_颤振中：^0.8.1”描述了一种通过自定义的解决方法类的扩展BarRendererDecorator。

金钱线是通过最终在画布上旋转绘制文本的方向：

canvas.drawText(labelElement, labelX, labelY, rotation: -math.pi / 2);

完整的解决方案可能不是最可维护的（就成为技术债务而言，因为图表包不可避免地会更新），但它会完成这项工作。

（与此同时，我决定不装饰条，而是使用点击手势来显示条值等的自定义工具提示。UI 更整洁，更少拥挤，尤其是在小屏幕上。）

推荐阅读