Skip to content

fix: add inverse crosshair when set axes inverse - #3989

Closed
LonelySnowman wants to merge 2 commits into
VisActor:developfrom
LonelySnowman:fix-histogram-inverse
Closed

fix: add inverse crosshair when set axes inverse#3989
LonelySnowman wants to merge 2 commits into
VisActor:developfrom
LonelySnowman:fix-histogram-inverse

Conversation

@LonelySnowman

Copy link
Copy Markdown
Contributor

🤔 这个分支是...

  • 新功能
  • Bug fix
  • Ts 类型更新
  • 打包优化
  • 性能优化
  • 功能增强
  • 重构
  • 依赖版本更新
  • 代码优化
  • 测试 case 更新
  • 分支合并
  • 发布
  • 网站/文档更新
  • demo 更新
  • Workflow
  • 其他 (具体是什么,请补充?)

🔗 相关 issue 链接

Fixed #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 之前,请检查一下内容. ⚠️

  • 文档提供了,或者更新,或者不需要
  • Demo 提供了,或者更新,或者不需要
  • Ts 类型定义提供了,或者更新,或者不需要
  • Changelog 提供了,或者不需要

🚀 Summary

copilot:summary

🔍 Walkthrough

copilot:walkthrough

@LonelySnowman

Copy link
Copy Markdown
Contributor Author

修复后的截图

image

@github-actions github-actions Bot added the chore label Jun 4, 2025
@LonelySnowman

Copy link
Copy Markdown
Contributor Author

@xuanhun 辛苦抽空帮忙 review 下这个 PR。

@LonelySnowman

Copy link
Copy Markdown
Contributor Author

@xuefei1313 请问这个 PR 还能继续推进吗,很久之前提出的了,没人帮忙处理。

@Issues-translate-bot

Copy link
Copy Markdown

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿


@xuefei1313 Can this PR be pushed forward? It was raised a long time ago and no one has helped.

@xile611

xile611 commented Sep 9, 2026

Copy link
Copy Markdown
Contributor

感谢你提交修复、提供验证截图并持续跟进,也抱歉让这个 PR 等待了这么久。

这次整理中,我们确认 #4561 通过统一按区间两个端点计算 crosshair 的起点和宽度,能够同时覆盖反向坐标轴下的直方图和 mosaic 场景;评估时也补充验证了横纵轴、正反向及字段顺序的组合,覆盖了本 PR 对应的问题。

为集中评审和维护,后续将由 #4561 统一推进,因此关闭本 PR。#4561 目前尚未合入,相关问题 #3973 仍需通过后续合入完成修复。

感谢你为问题定位、修复和验证作出的贡献!

@xile611 xile611 closed this Sep 9, 2026
@Issues-translate-bot

Copy link
Copy Markdown

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿


Thank you for submitting fixes, providing verification screenshots, and continuing to follow up, and I'm sorry for making this PR wait so long.

In this review, we confirmed that #4561 can simultaneously cover the histogram and mosaic scenes under the reverse coordinate axis by uniformly calculating the starting point and width of the crosshair based on the two endpoints of the interval. During the evaluation, we also additionally verified that the combination of the horizontal and vertical axes, forward and reverse directions, and field order covered the issues corresponding to this PR.

In order to centralize review and maintenance, the follow-up will be unified by #4561, so this PR is closed. #4561 has not yet been merged, and the related issue #3973 still needs to be fixed through subsequent merges.

Thank you for your contribution to problem location, fix and verification!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] histogram background have offset when set axes inverse: true

3 participants