IssueHuntantvis/G2
The issue has been closed
[v5] : 存在没有xFiled的对象, 会导致图标出错 #4437
Valar103769 posted onGitHub
问题, 第一项和最后一项里没有xField, 就会导致图标出错 复现: 把下面的代码复制到链接里 https://g2.antv.antgroup.com/examples/general/line/#line-basic
/**
* A recreation of this demo: https://observablehq.com/@d3/line-chart
*/
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
autoFit: true,
});
const data = [
{
"hour": " ",
"new_recharge_orders": 1656,
"recharge_orders": 12672,
"total_row": 1
},
{
"hour": "2022-12-03 00",
"new_recharge_orders": 29,
"recharge_orders": 864,
"total_row": false,
"xField": "00",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 00",
"new_recharge_orders": 19,
"recharge_orders": 715,
"total_row": false,
"xField": "00",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 01",
"new_recharge_orders": 36,
"recharge_orders": 618,
"total_row": false,
"xField": "01",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 01",
"new_recharge_orders": 31,
"recharge_orders": 556,
"total_row": false,
"xField": "01",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 02",
"new_recharge_orders": 38,
"recharge_orders": 591,
"total_row": false,
"xField": "02",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 02",
"new_recharge_orders": 19,
"recharge_orders": 579,
"total_row": false,
"xField": "02",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 03",
"new_recharge_orders": 67,
"recharge_orders": 452,
"total_row": false,
"xField": "03",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 03",
"new_recharge_orders": 29,
"recharge_orders": 430,
"total_row": false,
"xField": "03",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 04",
"new_recharge_orders": 54,
"recharge_orders": 443,
"total_row": false,
"xField": "04",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 04",
"new_recharge_orders": 51,
"recharge_orders": 495,
"total_row": false,
"xField": "04",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 05",
"new_recharge_orders": 67,
"recharge_orders": 486,
"total_row": false,
"xField": "05",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 05",
"new_recharge_orders": 42,
"recharge_orders": 477,
"total_row": false,
"xField": "05",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 06",
"new_recharge_orders": 56,
"recharge_orders": 459,
"total_row": false,
"xField": "06",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 06",
"new_recharge_orders": 41,
"recharge_orders": 380,
"total_row": false,
"xField": "06",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 07",
"new_recharge_orders": 61,
"recharge_orders": 600,
"total_row": false,
"xField": "07",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 07",
"new_recharge_orders": 54,
"recharge_orders": 569,
"total_row": false,
"xField": "07",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 08",
"new_recharge_orders": 67,
"recharge_orders": 481,
"total_row": false,
"xField": "08",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 08",
"new_recharge_orders": 34,
"recharge_orders": 422,
"total_row": false,
"xField": "08",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 09",
"new_recharge_orders": 70,
"recharge_orders": 491,
"total_row": false,
"xField": "09",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 09",
"new_recharge_orders": 37,
"recharge_orders": 381,
"total_row": false,
"xField": "09",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 10",
"new_recharge_orders": 75,
"recharge_orders": 485,
"total_row": false,
"xField": "10",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 10",
"new_recharge_orders": 52,
"recharge_orders": 390,
"total_row": false,
"xField": "10",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 11",
"new_recharge_orders": 55,
"recharge_orders": 406,
"total_row": false,
"xField": "11",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 11",
"new_recharge_orders": 45,
"recharge_orders": 411,
"total_row": false,
"xField": "11",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 12",
"new_recharge_orders": 68,
"recharge_orders": 477,
"total_row": false,
"xField": "12",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 12",
"new_recharge_orders": 44,
"recharge_orders": 462,
"total_row": false,
"xField": "12",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 13",
"new_recharge_orders": 79,
"recharge_orders": 691,
"total_row": false,
"xField": "13",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 13",
"new_recharge_orders": 24,
"recharge_orders": 639,
"total_row": false,
"xField": "13",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 14",
"new_recharge_orders": 61,
"recharge_orders": 525,
"total_row": false,
"xField": "14",
"series": "2022-12-03"
},
{
"hour": "2022-12-09 14",
"new_recharge_orders": 25,
"recharge_orders": 481,
"total_row": false,
"xField": "14",
"series": "2022-12-09"
},
{
"hour": "2022-12-03 15",
"new_recharge_orders": 55,
"recharge_orders": 467,
"total_row": false,
"xField": "15",
"series": "2022-12-03"
},
{
"hour": "2022-12-03 16",
"new_recharge_orders": 72,
"recharge_orders": 438,
"total_row": false,
"xField": "16",
"series": "2022-12-03"
},
{
"hour": "2022-12-03 17",
"new_recharge_orders": 67,
"recharge_orders": 446,
"total_row": false,
"xField": "17",
"series": "2022-12-03"
},
{
"hour": "2022-12-03 18",
"new_recharge_orders": 93,
"recharge_orders": 505,
"total_row": false,
"xField": "18",
"series": "2022-12-03"
},
{
"hour": "2022-12-03 19",
"new_recharge_orders": 90,
"recharge_orders": 551,
"total_row": false,
"xField": "19",
"series": "2022-12-03"
},
{
"hour": "2022-12-03 20",
"new_recharge_orders": 107,
"recharge_orders": 571,
"total_row": false,
"xField": "20",
"series": "2022-12-03"
},
{
"hour": "2022-12-03 21",
"new_recharge_orders": 94,
"recharge_orders": 531,
"total_row": false,
"xField": "21",
"series": "2022-12-03"
},
{
"hour": "2022-12-03 22",
"new_recharge_orders": 85,
"recharge_orders": 538,
"total_row": false,
"xField": "22",
"series": "2022-12-03"
},
{
"hour": "2022-12-03 23",
"new_recharge_orders": 110,
"recharge_orders": 556,
"total_row": false,
"xField": "23",
"series": "2022-12-03"
},
{
"hour": " ",
"new_recharge_orders": 547,
"recharge_orders": 7387,
"total_row": 1
}
]
chart
.line()
.data(data)
.encode('x', 'xField')
.encode('y', 'new_recharge_orders')
.encode('color', 'series')
.axis('x', {
title: '时间',
})
.interaction({
type: 'tooltip',
})
chart.render()