javascript - G2Plot 图表堆栈错误的列

Question

编辑：添加一个片段，代码如下：

<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'
};

但是一些数据列会相互堆叠，并将它们的“位置”留空（见下面的截图）

这是文档

Answer 1

我发现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>