迁移 4.0 简单股票图 #5905

认领

G2 v5中似乎不存在类似G2 v4的.schema().shape('candle')这种生成烛型图的方式，是否需要自定义shape来绘制烛型图

@1379255913 可以先看看这个例子：https://g2.antv.antgroup.com/examples/general/candlestick/#line-candle-stick

对案例2进行迁移时，使用了空间复合，此时点击第一个图的图例只会改变第二个图，而不会改变第一个图，点击第二个图的图例会发生报错，请问如何解决

相关issue #6240

点击第二个图的图例 配置项

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

const flex = chart
  .spaceFlex()
  .attr('ratio', [7, 3])
  .attr('direction', 'col')
  .data({
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/candle-sticks.json',
    transform: [{
      type: 'sort',
      callback: (a , b) => {
        return new Date(a.time) - new Date(b.time)
      }
    },
      {
        type: 'map',
        callback: obj => {
          const trend = Math.sign(obj.start - obj.end);
          obj.trend = trend > 0 ? "下跌" : trend ===0 ? "不变" : "上涨"
          obj.link = [obj.min, obj.max];
          obj.interval = [obj.start, obj.end]
          return obj;
        }
      }
    ]
  })


const view = flex
  .view()
  .scale('color', {
    domain: ["下跌", "不变", "上涨"],
    range: ['#4daf4a', '#999999', '#e41a1c'],
  })


view
  .link()
  .encode('x', 'time')
  .encode('y', ['min', 'max'])
  .encode('color', 'trend')
  .tooltip({
    title: 'time',
    items: [
      { field: 'start', name: '开盘价' },
      { field: 'end', name: '收盘价' },
      { field: 'min', name: '最低价' },
      { field: 'max', name: '最高价' },
    ],
  })

view
  .interval()
  .encode('x', 'time')
  .encode('y', ['start', 'end'])
  .encode('color', 'trend')
  .style('fillOpacity', 1)
  .style('stroke', (d) => {
    if (d.trend === "不变") return '#999999'
  })
  .axis('x', {
    title: false
  })
  .axis('y', {
    title: false
  })
  .tooltip({
    title: 'time',
    items: [
      { field: 'start', name: '开盘价' },
      { field: 'end', name: '收盘价' },
      { field: 'min', name: '最低价' },
      { field: 'max', name: '最高价' },
    ],
  })

flex
  .interval()
  .scale('color', {
    domain: ["下跌", "不变", "上涨"],
    range: ['#4daf4a', '#999999', '#e41a1c'],
  })
  .encode('x', 'time')
  .encode('y', 'start')
  .encode('color', 'trend')
  .axis('x', false)
  .axis('y', {
    title: false
  })

chart.render();

@1379255913 可以不用空间复合哈，可以全部都放在一个 view 里面。

两个图表全部都放在一个 view话，能否给出一些例子，目前案例中有多图表的都是通过空间复合完成的

@1379255913 不好意思，刚才看错了。应该是用两个 chart 对象，可以参考这个例子