antvis / G2

📊 The concise and progressive visualization grammar.
https://g2.antv.antgroup.com
MIT License
12.13k stars 1.59k forks source link

[v5] 如何实现 axis label 内容过长时, 换行 + 超出隐藏显示省略号 + tooltip显示完整内容 #6412

Open fengzhiyuanworks opened 2 months ago

fengzhiyuanworks commented 2 months ago

问题描述

[v5] 版本貌似无法实现 [v4] 的 axis 内容过长时, 换行 + 超出隐藏显示省略号 + tooltip显示完整内容; 文档提供的api, 换行 需要 补充 labelSpacing: -5 才能显示换行内容, 且不能与 labelAutoEllipsis 同时使用

重现链接

No response

重现步骤

No response

预期行为

antv

平台

屏幕截图或视频(可选)

No response

补充说明(可选)

No response

fengzhiyuanworks commented 2 months ago
import { Chart } from "@antv/g2";

const chart = new Chart({ container: "container" });

chart.options({
  type: "interval",
  autoFit: true,
  size: 0,
  data: [
    { letter: "A-公司公司公司公司公司公司", frequency: 0.08167 },
    { letter: "B-公司公司公司公司公司公司", frequency: 0.01492 },
    { letter: "C-公司公司公司公司公司公司", frequency: 0.02782 },
    { letter: "D-公司公司公司公司公司公司", frequency: 0.04253 },
    { letter: "E-公司公司公司公司公司公司", frequency: 0.12702 },
    { letter: "F-公司公司公司公司公司公司", frequency: 0.02288 },
    { letter: "G-公司公司公司公司公司公司", frequency: 0.02015 },
    { letter: "H-公司公司公司公司公司公司", frequency: 0.06094 },
    { letter: "I-公司公司公司公司公司公司", frequency: 0.06966 },
    { letter: "J-公司公司公司公司公司公司", frequency: 0.00153 },
    { letter: "K-公司公司公司公司公司公司", frequency: 0.00772 },
    { letter: "L-公司公司公司公司公司公司", frequency: 0.04025 },
    { letter: "M-公司公司公司公司公司公司", frequency: 0.02406 },
    { letter: "N-公司公司公司公司公司公司", frequency: 0.06749 },
    { letter: "O-公司公司公司公司公司公司", frequency: 0.07507 },
    { letter: "P-公司公司公司公司公司公司", frequency: 0.01929 },
    { letter: "Q-公司公司公司公司公司公司", frequency: 0.00095 },
    { letter: "R-公司公司公司公司公司公司", frequency: 0.05987 },
    { letter: "S-公司公司公司公司公司公司", frequency: 0.06327 },
    { letter: "T-公司公司公司公司公司公司", frequency: 0.09056 },
    { letter: "U-公司公司公司公司公司公司", frequency: 0.02758 },
    { letter: "V-公司公司公司公司公司公司", frequency: 0.00978 },
    { letter: "W-公司公司公司公司公司公司", frequency: 0.0236 },
    { letter: "X-公司公司公司公司公司公司", frequency: 0.0015 },
    { letter: "Y-公司公司公司公司公司公司", frequency: 0.01974 },
    { letter: "Z-公司公司公司公司公司公司", frequency: 0.00074 }
  ],
  encode: { x: "letter", y: "frequency" },
  scrollbar: {
    x: { ratio: 0.5 }
  },
  axis: {
    x: {
      transform:[],
      labelAutoRotate: false,
      labelAutoHide: false,
      labelAutoWrap: { maxLines: 2,wordWrapWidth:50,recoverWhenFailed:false },
      labelAutoEllipsis: true,
      labelSpacing: -5
    }
  },
  style: {
    maxWidth: 16,

  }
});

chart.render();

这么设置可是实现部分效果, 但是因为设置了 labelSpacing: -5 , 需要补充 insetBottom: 5 来调整间距, 但位置还是与轴有偏差, 看有无最优解

image

收起的 label tooltip 暂未找到解决方案