如何在图表中为EXTJS 6.5.x中的x类别字段标签添加工具提示

Question

我正在使用EXTJ 6.5。我设计了一个条形图，其中x轴类别标签的长度太大，与标签重叠。因此，对于临时修复，我添加了以下代码以将值修整为15个字符以显示带有三个点的值后缀。

{
type: 'category',
position: 'bottom',
fields: 'name',
renderer: function(item, label, lastLabel) {
  return Ext.util.Format.ellipsis(label, 15);
}

我面临的问题是，我无法为标签添加任何HTML内容，例如，自动换行标签或添加任何工具提示。

Answer 1

1。样式

尽管有限制，但可以将样式添加到图表标签。完整选项here。

示例（在此documentation fiddle中测试）：

axes: {
    type: 'category',
    position: 'bottom',
    fields: ['name'],
    label: {
    rotation: 270,
    color: 'red'
  },
    title: {
        text: 'Sample Values',
        fontSize: 15
    }
 },

2。工具提示

要在标签上添加工具提示，您可以执行以下操作：

（已编辑代码段以适合您的需求）

renderer: function(item, label, lastLabel) {
  var trimmedLabel = Ext.util.Format.ellipsis(label, 15);

  return Ext.String.format("<div data-qtip="{0}">{1}</div>", label, trimmedLabel);
}