Open fengzhiyuanworks opened 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
来调整间距, 但位置还是与轴有偏差, 看有无最优解
收起的 label tooltip 暂未找到解决方案
问题描述
[v5] 版本貌似无法实现 [v4] 的 axis 内容过长时, 换行 + 超出隐藏显示省略号 + tooltip显示完整内容; 文档提供的api, 换行 需要 补充
labelSpacing: -5
才能显示换行内容, 且不能与labelAutoEllipsis
同时使用重现链接
No response
重现步骤
No response
预期行为
平台
屏幕截图或视频(可选)
No response
补充说明(可选)
No response