antvis/G2

[Bug]:legend在没有设置size和itemWidth的基础上,设置maxCols时展示不全,设置了size,maxCols失效 #6743

18211365467 posted onGitHub

Describe the bug / 问题描述

Image>

No response

Steps to Reproduce the Bug or Issue / 重现步骤

import { Chart } from '@antv/g2';

const chart = new Chart({ container: 'container', height: 350 }); const shapeList = ['bowtie', 'smooth', 'hv', 'rect', 'hollowPoint']; const data = [ { genre: 'Sports', sold: 50 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Other', sold: 150 }, { genre: 'Sp34orts', sold: 50 }, { genre: 'Stra2tegy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shoo5ter', sold: 350 }, { genre: 'Othe4r', sold: 150 }, { genre: 'Sports', sold: 50 }, { genre: 'Strat22egy', sold: 115 }, { genre: 'Acti2on', sold: 120 }, { genre: 'Sho23oter', sold: 350 }, { genre: 'Oth3er', sold: 150 }, { genre: 'S35ports', sold: 50 }, { genre: 'Strat44egy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Othe5r', sold: 150 }, { genre: 'S8ports', sold: 50 }, { genre: 'Str7ategy', sold: 115 }, { genre: 'Act7ion', sold: 120 }, { genre: 'Shoo2ter', sold: 350 }, { genre: 'Oth4er', sold: 150 },

]; chart.options({ type: 'interval', data, encode: { x: 'genre', y: 'sold', color: 'genre' }, legend: { color: {

  maxCols:1,
  position:'left',
  // itemMarker
  itemMarker: (d, index) => shapeList[index],
  // itemLabel
  itemLabelFill: 'red',
  // itemValue
  itemValueText: (d, index) => data[index]['sold'],
  // itemBackground
  itemBackgroundFill: (d) => d.color,
  itemBackgroundFillOpacity: 0.2,
},

}, });

chart.render();

Version / 版本

Please select / 请选择

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他

itemLabel会根据宽度自动省略

Image

itemValue 没有超出省略,如果要展示value并且限制列数的话,需要配置一下图表的marginLeft和paddingLeft,保证有足够的空间

posted by interstellarmt 18 days ago

⚠️ This issue has been automatically closed due to inactivity.

  • If the issue is still relevant and important to you, feel free to:
    1. Reopen with additional information
    2. Create a new issue with updated context
    3. Reference any related issues or discussions

We close inactive issues to keep our backlog manageable and focused on active issues.

Your contribution makes our project better! 🌟


⚠️ 由于长期无活动,此 issue 已被自动关闭。

  • 如果这个问题对您来说仍然重要,您可以:
    1. 重新打开并提供补充信息
    2. 创建一个新的 issue 并更新相关背景
    3. 关联相关的 issue 或讨论

为了更好地维护项目,我们需要定期清理不活跃的问题。

感谢您为开源添砖加瓦!🌟

posted by github-actions[bot] 11 days ago

Fund this Issue

$0.00
Funded

Pull requests