Skip to content

fix: add inverse crosshair when set axes inverse #3989

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

LonelySnowman
Copy link
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
Contributor Author

修复后的截图

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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