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>

​