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

Posted 2023-03-14

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

【英文标题】：How to add tooltip in chart for x category field label in EXTJS 6.5.x

【发布时间】：2020-02-03 13:30:04

【问题描述】：

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

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

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

【参考方案1】：

1.造型

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

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

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

2。工具提示

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

（根据您的需要编辑代码 sn-p）

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);

【讨论】：

通过应用工具提示代码解决方案，我得到 Uncaught ReferenceError: tooltip is not defined

嗯，是的，您需要定义工具提示变量并根据需要进行调整。

你能帮我定义一下吗？很抱歉打扰您，但无法弄清楚。

@Mani 这是您的完整标签。无变形。只是一个字符串

@pvlt 没找到你。