antvis/G2

图例设置 maxItemWidth 后 value 一直被省略且没有 tip #3908

maplor posted onGitHub

  • I have searched the issues of this repository and believe that this is not a duplicate.

Edit on CodeSandbox

Steps to reproduce

legend 设置 itemValue 和 maxItemWidth。 当图例比较宽时,itemName 正常省略且鼠标 hover 有 tip,itemValue 一直被省略且无 tip。

具体可见上方链接。https://codesandbox.io/s/happy-andras-876d5s?file=/index.ts

Environment Info
g2 4.2.0
System -
Browser -

<!-- generated by antv-issue-helper. DO NOT REMOVE -->


需要注册交互:

registerInteraction('ellipsis-text', {
  start: [
    {
      trigger: 'legend-item-name:mousemove',
      action: 'ellipsis-text:show',
      throttle: { wait: 50, leading: true, trailing: false },
    },
    {
      trigger: 'legend-item-name:touchstart',
      action: 'ellipsis-text:show',
      throttle: { wait: 50, leading: true, trailing: false },
    },
    {
      trigger: 'axis-label:mousemove',
      action: 'ellipsis-text:show',
      throttle: { wait: 50, leading: true, trailing: false },
    },
    {
      trigger: 'axis-label:touchstart',
      action: 'ellipsis-text:show',
      throttle: { wait: 50, leading: true, trailing: false },
    },
  ],
  end: [
    { trigger: 'legend-item-name:mouseleave', action: 'ellipsis-text:hide' },
    { trigger: 'legend-item-name:touchend', action: 'ellipsis-text:hide' },
    { trigger: 'axis-label:mouseleave', action: 'ellipsis-text:hide' },
    { trigger: 'axis-label:touchend', action: 'ellipsis-text:hide' },
  ],
});

内置没有为 legend-item-value 注册交互,复写一下这个交互就行,如下:

registerInteraction('ellipsis-text', {
  start: [
    {
      trigger: 'legend-item-name:mousemove',
      action: 'ellipsis-text:show',
      throttle: { wait: 50, leading: true, trailing: false },
    },
    {
      trigger: 'legend-item-name:touchstart',
      action: 'ellipsis-text:show',
      throttle: { wait: 50, leading: true, trailing: false },
    },
    {
      trigger: 'legend-item-value:mousemove',
      action: 'ellipsis-text:show',
      throttle: { wait: 50, leading: true, trailing: false },
    },
    {
      trigger: 'legend-item-value:touchstart',
      action: 'ellipsis-text:show',
      throttle: { wait: 50, leading: true, trailing: false },
    },
    {
      trigger: 'axis-label:mousemove',
      action: 'ellipsis-text:show',
      throttle: { wait: 50, leading: true, trailing: false },
    },
    {
      trigger: 'axis-label:touchstart',
      action: 'ellipsis-text:show',
      throttle: { wait: 50, leading: true, trailing: false },
    },
  ],
  end: [
    { trigger: 'legend-item-name:mouseleave', action: 'ellipsis-text:hide' },
    { trigger: 'legend-item-name:touchend', action: 'ellipsis-text:hide' },
    { trigger: 'legend-item-value:mouseleave', action: 'ellipsis-text:hide' },
    { trigger: 'legend-item-value:touchend', action: 'ellipsis-text:hide' },
    { trigger: 'axis-label:mouseleave', action: 'ellipsis-text:hide' },
    { trigger: 'axis-label:touchend', action: 'ellipsis-text:hide' },
  ],
});
posted by visiky almost 3 years ago

经确认,上方代码可以让 legend-item-name 和 legend-item-value 同事被裁减,并展示 tip。但目前 G2 不支持只为 legend-item-name 设置 ellipsis,而 legend-item-value 不设置 ellipsis

posted by maplor almost 3 years ago

Fund this Issue

$0.00
Funded

Pull requests