自じ定てい义图例れい的てき itemMarker 为圆角かく

[YY88Xu]

问题描述

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

const data = [
{ name: 'London', 月つき份: 'Jan.', 月つき均ひとし降雨こうう量りょう: 18.9 },
{ name: 'London', 月つき份: 'Feb.', 月つき均ひとし降雨こうう量りょう: 28.8 },
{ name: 'London', 月つき份: 'Mar.', 月つき均ひとし降雨こうう量りょう: 39.3 },
{ name: 'London', 月つき份: 'Apr.', 月つき均ひとし降雨こうう量りょう: 81.4 },
{ name: 'London', 月つき份: 'May', 月つき均ひとし降雨こうう量りょう: 47 },
{ name: 'London', 月つき份: 'Jun.', 月つき均ひとし降雨こうう量りょう: 20.3 },
{ name: 'London', 月つき份: 'Jul.', 月つき均ひとし降雨こうう量りょう: 24 },
{ name: 'London', 月つき份: 'Aug.', 月つき均ひとし降雨こうう量りょう: 35.6 },
{ name: 'Berlin', 月つき份: 'Jan.', 月つき均ひとし降雨こうう量りょう: 12.4 },
{ name: 'Berlin', 月つき份: 'Feb.', 月つき均ひとし降雨こうう量りょう: 23.2 },
{ name: 'Berlin', 月つき份: 'Mar.', 月つき均ひとし降雨こうう量りょう: 34.5 },
{ name: 'Berlin', 月つき份: 'Apr.', 月つき均ひとし降雨こうう量りょう: 99.7 },
{ name: 'Berlin', 月つき份: 'May', 月つき均ひとし降雨こうう量りょう: 52.6 },
{ name: 'Berlin', 月つき份: 'Jun.', 月つき均ひとし降雨こうう量りょう: 35.5 },
{ name: 'Berlin', 月つき份: 'Jul.', 月つき均ひとし降雨こうう量りょう: 37.4 },
{ name: 'Berlin', 月つき份: 'Aug.', 月つき均ひとし降雨こうう量りょう: 42.4 },
];

const chart = new Chart({
container: 'container',
autoFit: true,
});

chart
.interval()
.data(data)
.encode('x', '月つき份')
.encode('y', '月がつ均ひとし降雨こうう量りょう')
.encode('color', 'name')
.transform({ type: 'dodgeX' })
.interaction('elementHighlight', { background: true })
.legend('color', { position: 'top', layout: { justifyContent: 'center' }})
chart.render();

想そう设置图例的てき itemMarker 正方形せいほうけい为圆角かく，出で了りょう图例全部ぜんぶ自じ定てい义，可か以只定てい义 itemMarker 为自定てい义的 div 吗

重じゅう现链接せっ

No response

重じゅう现步骤

No response

预期行ぎょう为

No response

平台ひらだい

• 操作そうさ系けい统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器き: [Google Chrome, Safari, Firefox]

屏へい幕まく截图或ある视频（可か选）

No response

补充说明（可か选）

No response

[Runtus]

我わが来らい处理下か

[pearmini]

@Runtus 棒ぼう！这个算さん一个中级任务。

[Runtus]

Hi老ろう哥 @pearmini ，这个issue我わが想そう确认一いち下か，是ぜ想おもえ要よう自じ定てい义itemMarker吗，因いん为我去さ看み了りょう下か官かん方かた文ぶん档，现在itemMarker可か以自定てい义样式しき啥的

[pearmini]

@Runtus 如果可か以的话，可か以在编辑器き验证一いち下か，然しか后きさき回かい复到这个 issue 里さと面めん。如果你觉得とく有ゆう必要ひつよう，也可以添加てんか一いち个案例れい！😄

[Runtus]

如果要よう设置圆角，可か以通过itemMarker设置，代だい码如下か：

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

const data = [
  { name: 'London', 月つき份: 'Jan.', 月つき均ひとし降雨こうう量りょう: 18.9 },
  { name: 'London', 月つき份: 'Feb.', 月つき均ひとし降雨こうう量りょう: 28.8 },
  { name: 'London', 月つき份: 'Mar.', 月つき均ひとし降雨こうう量りょう: 39.3 },
  { name: 'London', 月つき份: 'Apr.', 月つき均ひとし降雨こうう量りょう: 81.4 },
  { name: 'London', 月つき份: 'May', 月つき均ひとし降雨こうう量りょう: 47 },
  { name: 'London', 月つき份: 'Jun.', 月つき均ひとし降雨こうう量りょう: 20.3 },
  { name: 'London', 月つき份: 'Jul.', 月つき均ひとし降雨こうう量りょう: 24 },
  { name: 'London', 月つき份: 'Aug.', 月つき均ひとし降雨こうう量りょう: 35.6 },
  { name: 'Berlin', 月つき份: 'Jan.', 月つき均ひとし降雨こうう量りょう: 12.4 },
  { name: 'Berlin', 月つき份: 'Feb.', 月つき均ひとし降雨こうう量りょう: 23.2 },
  { name: 'Berlin', 月つき份: 'Mar.', 月つき均ひとし降雨こうう量りょう: 34.5 },
  { name: 'Berlin', 月つき份: 'Apr.', 月つき均ひとし降雨こうう量りょう: 99.7 },
  { name: 'Berlin', 月つき份: 'May', 月つき均ひとし降雨こうう量りょう: 52.6 },
  { name: 'Berlin', 月つき份: 'Jun.', 月つき均ひとし降雨こうう量りょう: 35.5 },
  { name: 'Berlin', 月つき份: 'Jul.', 月つき均ひとし降雨こうう量りょう: 37.4 },
  { name: 'Berlin', 月つき份: 'Aug.', 月つき均ひとし降雨こうう量りょう: 42.4 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .interval()
  .data(data)
  .encode('x', '月つき份')
  .encode('y', '月がつ均ひとし降雨こうう量りょう')
  .encode('color', 'name')
  .transform({ type: 'stackY' })
  .interaction('elementHighlight', { background: true })
  .legend({
    color: {
      itemMarker: 'circle'
    }
  })
  ;

chart.render();

更さら多た详细使用しよう可か以查阅文档：https://g2.antv.antgroup.com/spec/component/legend#%E5%9B%BE%E4%BE%8B%E9%A1%B9

[pearmini]

@Runtus 我わが感かん觉 @YY88Xu 可能かのう需要じゅよう去さ设置矩形くけい的てき圆角，而不是ぜ直接ちょくせつ设置为圆形がた？不ふ过这个 PR 合ごう并之后きさき可か以通过自定てい义 symbol 解かい决问题：#6381

[wangxingkang]

@pearmini #6388

[Runtus]

ok, @pearmini 那な老ろう哥，我わが看み另一个老哥 @wangxingkang 已やめ经修复这个问题了，那な我わが就暂时不管かん了りょう哇

[pearmini]

@Runtus 嗯嗯，幸こう苦く啦 🤣