VChart
VChart copied to clipboard
VisActor
fix: add inverse crosshair when set axes inverse
🤔 这个分支是...
- [ ] 新功能
- [x] Bug fix
- [ ] Ts 类型更新
- [ ] 打包优化
- [ ] 性能优化
- [ ] 功能增强
- [ ] 重构
- [ ] 依赖版本更新
- [ ] 代码优化
- [ ] 测试 case 更新
- [ ] 分支合并
- [ ] 发布
- [ ] 网站/文档更新
- [ ] demo 更新
- [ ] Workflow
- [ ] 其他 (具体是什么，请补充?)
🔗 相关 issue 链接
Fixed https://github.com/VisActor/VChart/issues/3973
🔗 相关的 PR 链接
None
🐞 Bugserver 用例 id
Badcase：
const spec = {
type: 'histogram',
xField: 'from',
x2Field: 'to',
yField: 'profit',
seriesField: 'type',
barPadding: 10,
bar: {
style: {
stroke: 'white',
lineWidth: 1
}
},
axes: [
{
orient: 'bottom',
inverse: true,
nice: false,
tick: {
visible: true
}
}
],
title: {
text: 'Profit',
textStyle: {
align: 'center',
height: 50,
lineWidth: 3,
fill: '#333',
fontSize: 25,
fontFamily: 'Times New Roman'
}
},
tooltip: {
visible: true,
mark: {
title: {
key: 'title',
value: 'profit'
},
content: [
{
key: datum => datum['from'] + '～' + datum['to'],
value: datum => datum['profit']
}
]
}
},
data: [
{
name: 'data1',
values: [
{
from: 0,
to: 10,
profit: 2,
type: 'A'
},
{
from: 10,
to: 16,
profit: 3,
type: 'B'
},
{
from: 16,
to: 18,
profit: 15,
type: 'C'
},
{
from: 18,
to: 26,
profit: 12,
type: 'D'
},
{
from: 26,
to: 32,
profit: 22,
type: 'E'
},
{
from: 32,
to: 56,
profit: 7,
type: 'F'
},
{
from: 56,
to: 62,
profit: 17,
type: 'G'
}
]
}
]
}
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
💡 问题的背景&解决方案
直方图 axes 设置反向后, 由于 bandSize 设置了 Math.abs 导致 crossHair 没有正确渲染。对 axis.getInverse() && axis.type === ComponentTypeEnum.cartesianLinearAxis 进行反向处理。
📝 Changelog
| Language | Changelog |
|---|---|
| 🇺🇸 English | Fixed the issue with crosshair rendering in the wrong direction after histogram axes are reversed |
| 🇨🇳 Chinese | 修复直方图 axes 反向后 crosshair 渲染方向错误问题 |
☑️ 自测
⚠️ 在提交 PR 之前，请检查一下内容. ⚠️
- [x] 文档提供了，或者更新，或者不需要
- [x] Demo 提供了，或者更新，或者不需要
- [x] Ts 类型定义提供了，或者更新，或者不需要
- [x] Changelog 提供了，或者不需要
🚀 Summary
copilot:summary
🔍 Walkthrough
copilot:walkthrough
