The issue has been closed

树关系图给tooltip添加css样式无效 #6551

the-lemonboy posted onGitHub

问题描述

树关系图给tooltip添加css样式无效。

重现链接

No response

重现步骤

  const chart = new Chart({
    container: 'rightTwoChart',
    height: chartHeight.value,
    width: 400,
    theme: 'classicDark',
  });
  chart
    .treemap()
    .data({
      value: chartData.value,
    })
    .layout({
      tile: 'treemapResquarify',
      paddingInner: 5,
    })
    .encode('value', 'value')
    .legend(false)
    .tooltip({
      title: (d) => d.data.name,
      items: [
        (d) => ({
          name: '企业数量',
          value: d.value,
          channel: 'value',
        }),
      ],
    })
    .style({
      labelFill: '#1d1d1d',
      labelLineWidth: 1.5,
      labelFontSize: 10,
      labelFontWeight: 'bold',
      labelPosition: 'top-left',
      labelDx: 5,
      labelDy: 5,
    });
  chart
    .interaction('tooltip', {
      css: {
        '.g2-tooltip': {
          background: 'rgba(0, 0, 0, 0.50)',
          'border-radius': ' 2px !important',
          'box-shadow': '0px 10px 20px 0px rgba(0, 0, 0, 0.50) !important',
        },
        '.g2-tooltip-title': {
          'border-bottom': '0.5px solid #0F445B',
          color: '#fff',
        },
        '.g2-tooltip-list-item-name-label': {
          color: '#fff',
          'font-size': '10px',
        },
        '.g2-tooltip-list-item-value': {
          color: '#fff',
          'font-size': '10px',
        },
      },
    })
    .interaction({
      treemapDrillDown: {
        breadCrumbY: 12,
        activeFill: '#ff0000',
        breadCrumbFill: '#fff',
      },
    });
  chart.render();

预期行为

期望样式是：实际结果样式是：

平台

操作系统: [macOS, Windows, Linux, React Native ...]
网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

<img width="1298" alt="image" src="https://github.com/user-attachments/assets/b883f7c8-ee1b-4b1e-8c24-c9497a1eac2c" /> 问题出现在这里，当 arguments.length === 1 的设置在 arguments.length === 2 的后面时，会直接覆盖掉以前的 this.attr(k)。我觉得可以当 arguments.length === 1 时，将新的 interaction 添加到 obj 中，而不是直接覆盖掉。

posted by BQXBQX 4 months ago

@BQXBQX 所以是第二个 interaction 的时候，把 tooltip 的覆盖了？

posted by hustcc 4 months ago

你思路没问题，这里的代码写的不是很好，if 逻辑有点混乱，你可以尝试改改，单测不报错，增加的单测合理就行。

posted by hustcc 4 months ago

是的，目前 debug 的结果是 interaction对象中只有一个 treemapDrillDown 交互，tooltip 丢失。并且将两个交互顺序颠倒，bug 消失。

posted by BQXBQX 4 months ago

<img alt="image" width="1298" src="https://private-user-images.githubusercontent.com/132878537/395640796-b883f7c8-ee1b-4b1e-8c24-c9497a1eac2c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzQxODY5MzAsIm5iZiI6MTczNDE4NjYzMCwicGF0aCI6Ii8xMzI4Nzg1MzcvMzk1NjQwNzk2LWI4ODNmN2M4LWVlMWItNGIxZS04YzI0LWM5NDk3YTFlYWMyYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMjE0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTIxNFQxNDMwMzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xNzU5NjBjMzEzYjNhNjUwM2U5ZGNlMWU4NmFiZjcwZmFkZTQ1OGUyMzMxMTE1NmI0MTZiNzg2MzQ1NGU4ZGZlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.TWmLcqTo9cSqWTreVgaRZrinliGRcRZini7hPCuqRo8"> 问题出现在这里，当 arguments.length === 1 的设置在 arguments.length === 2 的后面时，会直接覆盖掉以前的 this.attr(k)。我觉得可以当 arguments.length === 1 时，将新的 interaction 添加到 obj 中，而不是直接覆盖掉。

这样改应该是一个 break change？@hustcc

可以试试下面两种写法其中一种？@the-lemonboy

chart
  .interaction("tooltip", {})
  .interaction("treemapDrillDown", {})

chart.interaction({
  tooltip: {},
  treemapDrillDown: {}
})

posted by pearmini 4 months ago

<img alt="image" width="1298" src="https://private-user-images.githubusercontent.com/132878537/395640796-b883f7c8-ee1b-4b1e-8c24-c9497a1eac2c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzQxODY5MzAsIm5iZiI6MTczNDE4NjYzMCwicGF0aCI6Ii8xMzI4Nzg1MzcvMzk1NjQwNzk2LWI4ODNmN2M4LWVlMWItNGIxZS04YzI0LWM5NDk3YTFlYWMyYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMjE0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTIxNFQxNDMwMzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xNzU5NjBjMzEzYjNhNjUwM2U5ZGNlMWU4NmFiZjcwZmFkZTQ1OGUyMzMxMTE1NmI0MTZiNzg2MzQ1NGU4ZGZlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.TWmLcqTo9cSqWTreVgaRZrinliGRcRZini7hPCuqRo8"> 问题出现在这里，当 arguments.length === 1 的设置在 arguments.length === 2 的后面时，会直接覆盖掉以前的 this.attr(k)。我觉得可以当 arguments.length === 1 时，将新的 interaction 添加到 obj 中，而不是直接覆盖掉。

这样改应该是一个 break change？@hustcc

可以试试下面两种写法其中一种？@the-lemonboy
chart
  .interaction("tooltip", {})
  .interaction("treemapDrillDown", {})
chart.interaction({
  tooltip: {},
  treemapDrillDown: {}
})

🙏感谢，这两种写法都可以。

posted by the-lemonboy 4 months ago

文档问题，不处理代码，文档 cy25 进行优化。

posted by hustcc 4 months ago

Fund this Issue

$0.00

Funded

Pull requests

树关系图给tooltip添加css样式无效 #6551

问题描述

重现链接

重现步骤

预期行为

平台

屏幕截图或视频（可选）

补充说明（可选）

Company

Community

Support

Connect