Skip to content

fix: add inverse crosshair when set axes inverse#3989

Open
LonelySnowman wants to merge 2 commits intoVisActor:developfrom
LonelySnowman:fix-histogram-inverse
Open

fix: add inverse crosshair when set axes inverse#3989
LonelySnowman wants to merge 2 commits intoVisActor: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。

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

1 participant