是否無法搭配使用 facetRect 和 coordinate('polar')

[Dennishi0925]

您好：

我想搭配使用 facet 和 coordinate('polar')
單純用 coordinate('polar') 時沒有遇上問題
單純用 facetRect 也沒有問題
結合一起使用時沒有效果或是會遇上 error

這邊是單純用 coordinate('polar') 的 code
可以正常運行

const data = [{
      "type": "《歸途有風》",
      "value": 1,
      "n": 58
    }, {
      "type": "《歸途有風》",
      "value": 2,
      "n": 38
    }, {
      "type": "《歸途有風》",
      "value": 3,
      "n": 25
    }, {
      "type": "《歸途有風》",
      "value": 4,
      "n": 19
    }, {
      "type": "《歸途有風》",
      "value": 5,
      "n": 10
    }, {
      "type": "《歸途有風》",
      "value": 6,
      "n": 14
    }]
const chart = new G2.Chart({
      container: 'container',
      autoFit: true,
      theme: 'classic',
    });
chart.
    coordinate({
      type: 'polar'
    });
chart
      .interval()
      .data(data)
      .encode('x', 'value')
      .encode('y', 'n')
      .encode('color', 'value')
      .axis('y', false);
chart.render();

但如果搭配使用facet 和 coordinate('polar') 時
沒有辦法跑出 polar 的效果
note：這邊資料有加上第二種 type 以便展示 facet 效果

const data = [{
      "type": "《山河圖》",
      "value": 1,
      "n": 64
    }, {
      "type": "《山河圖》",
      "value": 2,
      "n": 37
    }, {
      "type": "《山河圖》",
      "value": 3,
      "n": 29
    }, {
      "type": "《歸途有風》",
      "value": 1,
      "n": 58
    }, {
      "type": "《歸途有風》",
      "value": 2,
      "n": 38
    }, {
      "type": "《歸途有風》",
      "value": 3,
      "n": 25
    }]
const chart = new G2.Chart({
      container: 'container', 
      autoFit: true,
      theme: 'classic',
    });  
const facetchart = chart
      .facetRect()
      .data(data)
      .encode('x', 'type');
facetchart
      .interval()
      .coordinate('polar')  
      .encode('x', 'value') // 编码 x 通道
      .encode('y', 'n') // 编码 y 通道
      .encode('color', 'value')
      .axis('y', false);
chart.render();

我多加了一句 .coordinate('polar')
但產出的圖表沒有效果
如果把 .coordinate('polar') 放在 .facetRect() 後面
會跑出下方 error
Uncaught TypeError: chart.facetRect(...).data(...).encode(...).coordinate is not a function
想確認是否兩個 function 無法接替使用

感謝！

[pearmini]

正确的用法应该如下：

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

const data = [
  {
    type: '《山河圖》',
    value: 1,
    n: 64,
  },
  {
    type: '《山河圖》',
    value: 2,
    n: 37,
  },
  {
    type: '《山河圖》',
    value: 3,
    n: 29,
  },
  {
    type: '《歸途有風》',
    value: 1,
    n: 58,
  },
  {
    type: '《歸途有風》',
    value: 2,
    n: 38,
  },
  {
    type: '《歸途有風》',
    value: 3,
    n: 25,
  },
];
const chart = new Chart({
  container: 'container',
  autoFit: true,
  theme: 'classic',
});

const facetchart = chart.facetRect().data(data).encode('x', 'type');

facetchart
  .interval()
  .coordinate({ type: 'polar' }) //  这里设置 polar
  .encode('x', 'value')
  .encode('y', 'n')
  .encode('color', 'value')
  .axis('y', false);

chart.render();

但是目前还是没有绘制出来，我得排查一下。

[pearmini]

这个问题已经修复：#5228

[Dennishi0925]

謝謝您！週末還處理辛苦了！