timingKeyframe

在不同视图之间执行连续的过渡动画。通过 mark.key 和 mark.groupKey 去关联图形。

开始使用

fetch(
  'https://gw.alipayobjects.com/os/bmw-prod/fbe4a8c1-ce04-4ba3-912a-0b26d6965333.json',
)
  .then((res) => res.json())
  .then((data) => {
    const chart = new Chart({
      container: 'container',
      paddingTop: 60,
      paddingLeft: 100,
    });

    chart.options({
      type: 'timingKeyframe',
      direction: 'alternate',
      iterationCount: 4,
      children: [
        {
          // 条形图
          type: 'interval',
          data: data,
          transform: [{ type: 'groupX', y: 'mean' }],
          encode: {
            x: 'gender',
            y: 'weight',
            color: 'gender',
            // 指定 key
            key: 'gender',
          },
        },
        {
          // 散点图
          type: 'point',
          data: data,
          encode: {
            x: 'height',
            y: 'weight',
            color: 'gender',

            // 指定合并的条的 key
            groupKey: 'gender',
            shape: 'point',
          },
        },
      ],
    });

    chart.render();
  });

选项