G2Plot图表堆栈错误列

G2Plot chart stack wrong column

编辑:添加一个片段,代码如下:

<div id="app"></div>
<script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js"></script>
<script>
  const plot = new G2Plot.Column(document.getElementById('app'), {
        data: [
            {
                day: 9,
                amount: 11104.37
            },
            {
                day: 10,
                amount: 11244.82
            },
            {
                day: 11,
                amount: 10286.14
            },
            {
                day: 12,
                amount: 7485.57
            },
            {
                day: 1,
                amount: 9274.57
            },
            {
                day: 2,
                amount: 8899.95
            }
        ],
        xField: 'day',
        yField: 'amount'
    });
  plot.render();
</script>

我尝试使用 Ant 的 G2Plot,但遇到了一些问题。 我的目标是显示柱形图。

这是我的 G2Plot 配置:

const columnPlotConfig = {
    data: [
        {
            day: 9,
            amount: 11104.37
        },
        {
            day: 10,
            amount: 11244.82
        },
        {
            day: 11,
            amount: 10286.14
        },
        {
            day: 12,
            amount: 7485.57
        },
        {
            day: 1,
            amount: 9274.57
        },
        {
            day: 2,
            amount: 8899.95
        }
    ],
    xField: 'day',
    yField: 'amount'
};

但是一些数据列相互堆叠,使它们的“位置”空着(见下面的屏幕截图)

here is the doc

我发现 xField 需要 字符串值

<div id="app"></div>
<script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js"></script>
<script>
  const plot = new G2Plot.Column(document.getElementById('app'), {
  data: [
   {
    day: "9",
    amount: 11104.37
   },
   {
    day: "10",
    amount: 11244.82
   },
   {
    day: "11",
    amount: 10286.14
   },
   {
    day: "12",
    amount: 7485.57
   },
   {
    day: "1",
    amount: 9274.57
   },
   {
    day: "2",
    amount: 8899.95
   }
  ],
  xField: 'day',
  yField: 'amount'
 });
  plot.render();
</script>