antvis/G2

V5版本 图例样式 在增加shape 属性后失效 #5085

YangShuqing posted onGitHub

版本:5.0.8 示例

/**
 * A recreation of this demo: https://observablehq.com/@d3/variable-color-line
 */
import { Chart } from '@antv/g2';

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

chart
  .line()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/temperatures1.json',
  })
  .scale('y', { nice: true })
  .scale('color', {
    domain: ['CLR', 'FEW', 'SCT', 'BKN', 'OVC', 'VV '],
    range: [
      'deepskyblue',
      'lightskyblue',
      'lightblue',
      '#aaaaaa',
      '#666666',
      '#666666',
    ],
  })
  .encode('x', (d) => new Date(d.date))
  .encode('y', 'value')
  //.encode('shape', 'smooth') // 圆角 增加该项后 legend 所有设置 失效
  .legend({
    color: {
      itemMarkerSize: 40,
      // 只有写在这里才生效 issue 5082
      itemLabelFontSize: 30,
      itemLabelFill: 'red',
      style:{
       //style 中的设置未生效
        itemLabelFontSize: 50,
        itemLabelFill: '#fff',
      }
    },
  })
  .encode('color', 'condition')
  .encode('series', () => 'a')
  .style('gradient', 'x')
  .style('lineWidth', 2)
  .axis('x', { title: 'date' });

chart.render();

@pearmini

posted by YangShuqing almost 2 years ago

当前 legend 没有根据 shape 来处理样式,line 只有一种 marker 类型。

posted by hustcc almost 2 years ago

当前 legend 没有根据 shape 来处理样式,line 只有一种 marker 类型。

@hustcc 按照我的理解,按照代码中的写法 shape 是控制折线图的样式和legend并没有关系吧,并不应该设置后影响到legend的显示。如果想实现 折线图 圆角过度,且图例的lable 字体为红色 应该怎样写呢?

posted by YangShuqing almost 2 years ago

不好意思,我刚理解错了,这个 bug 已知了,在修复中了!

posted by hustcc almost 2 years ago

@hustcc @pearmini 这个bug 多久能修复啊?比较着急用两个功能

posted by YangShuqing almost 2 years ago

@hustcc @pearmini 这个bug 多久能修复啊?比较着急用两个功能

这两周会修复。

posted by pearmini almost 2 years ago

目前有个简单的解决办法:

chart.line().encode('shape', 'smooth');

// 改成下面
chart.line().style('shape', 'smooth');
posted by pearmini almost 2 years ago

这个问题已经修复了。

posted by pearmini over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests