G2Plot диаграмма стек неправильно коломна - PullRequest
0 голосов
/ 25 февраля 2020

РЕДАКТИРОВАТЬ: добавить фрагмент

<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>

Я пытался использовать G2Plot от Ant, но столкнулся с некоторыми проблемами. Моя цель - отобразить диаграмму Коломна.

вот моя конфигурация 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'
};

Но некоторые колонны данных складываются друг в друге и оставляют свои «места» пустыми (см. Скриншот ниже) enter image description here

здесь - до c

1 Ответ

1 голос
/ 26 февраля 2020

Я считаю, что 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...