迁移 4.0 简单股票图

[pearmini]

AntV Open Source Contribution Plan（可选）

• 我同意将这个 Issue 参与 OSCP 计划

Issue 类型

简单任务

任务介绍

将以下 4.0 股票图迁移到 5.0 的案例里面：

• https://github.com/antvis/G2/blob/master/examples/candlestick/candlestick/demo/basic.ts
• https://github.com/antvis/G2/blob/master/examples/candlestick/candlestick/demo/k-and-area.ts
• https://github.com/antvis/G2/blob/master/examples/candlestick/candlestick/demo/k-and-column.ts

参考说明

• 动机和注意事项：快来一起迁移 4.0 的简单案例吧 ❤️‍🔥❤️‍🔥❤️‍🔥 #5894
• 相关 PR：docs: add simple bar demos #5893

[1379255913]

认领

[1379255913]

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

[pearmini]

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

[1379255913]

对案例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();

[pearmini]

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

[1379255913]

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

[pearmini]

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