extjs - 如何在图表中为 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. 造型

虽然有限，但可以将样式添加到图表标签中。完整的选项在这里。

示例（在本文档 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);
}