Question

我刚刚开始学习EXT JS，我已经尝试梳理这些教程，但似乎没有找到我的问题。我的问题是我有一个条形图，我想旋转标签以留出更多空间。我可以很好地旋转它们，但看起来旋转点是基于标签的中间部分。我希望标签的末尾与该特定列的标记对齐。

如果没有意义，这是一张图片：

我有什么：

我想要的是什么：

似乎我想要实现的是一个非常标准的东西，但我似乎无法找到很多关于这个问题。

代码片段：

{
  xtype        : 'cartesian',
  store        : 'Store1',
  height       : 350,
  width        : 390,
  flipXY       : true,
  axes         : [
      {
         type     : 'category',
         position : 'left',
         label    : {
             rotation : {
                 degrees : -15
             }    
         }
    },
    {
       type     : 'numeric',
       position : 'bottom'
      }
    ],
    series : [
       {
          type    : 'bar',
          xField  : 'cName',
          yField  : 'cNumber',
          colors  : ['#99CCFF'],
          label   : {
              display : 'outside',
              field   : 'cNumber'
          }
      }
  ]
}

Answer 1

您可以设置textAlign: 'end'，将label配置更改为：

label: {
    textAlign: 'end',
    rotation: {
        degrees: -15
    }
}

修改

在使用标签配置后，希望这是您所寻找的：

label: {
    textAlign: 'end',
    textBaseline: 'hanging',
    x: -10,
    y: -10,
    rotation: {
        degrees: -15,
        centerX: -5
    }
}

工作示例：https://fiddle.sencha.com/#fiddle/uea

图表catergory标签只会从中心旋转？

1 个答案:

修改