The issue has been closed
https://g2.antv.antgroup.com/examples/general/line#line-connect-nulls
/**
* A recreation of this demo: https://observablehq.com/@d3/line-with-missing-data
*/
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
autoFit: true,
});
const data = [
{
"hour": "2022-12-09 16",
"recharge_orders": 18,
"total_row": false,
"user_group": "新用户"
},
{
"hour": "2022-12-09 16",
"recharge_orders": 39,
"total_row": false,
"user_group": "次新用户"
},
]
chart.line()
.data(data)
.encode('x', 'hour')
.encode('y', 'recharge_orders')
.encode('color', 'user_group')
.axis('x', {
title: '时间',
})
.scale('x', {
type: 'time',
mask: 'YY',
/* 其他配置项 */
})
.interaction({
type: 'tooltip',
shared: true,
})
.interaction({ type: 'elementHighlight' }) // 图形高亮
chart.render()
因为 Javascript 的 new Date 解析不了这个 hour 字段的日期格式。可以这么玩：
import { parse } from 'fecha';
// ...
chart
.line()
// ...
.encode('x', (d) => parse(d.hour, 'YYYY-MM-DD HH')) // 👈🏻 这里有更多的日期格式支持
猜测错误原因是: g2通过正则匹配xField, 知道这是个'YYYY-MM-DD HH '日期, 但是内部在处理的时候调用 new Date报错了?
那内部可以不使用new Date,换成你们的fecha吗?
这样格式化之后, tooltip不会提示完整日期了
猜测错误原因是: g2通过正则匹配xField, 知道这是个'YYYY-MM-DD HH '日期, 但是内部在处理的时候调用 new Date报错了? 那内部可以不使用new Date,换成你们的fecha吗?
一样，使用 fecha，也需要知道这个字符串的格式化方式 'YYYY-MM-DD HH'。这个格式化方式很多，而且更极端的情况，一个数据中，同一个日期字段，它的显示方式都不一样，那底层就很难处理了，所以还是需要约束传入的数据有一定的规范性。
我觉得别支持type time timecat了，完全没必要，就当普通的字符串处理得了，我们自己用labelFormat 格式化也简单啊，方式太多复杂死了，
话说我用了你给的解决方法，tooltip又不显示完整信息了，然后又没办法定义
这里有两种更好的做法：
// 第一种
import { parse } from 'fecha';
// ...
chart
.line()
// ...
.encode('x', 'hour')
.axis('x', { labelFormatter: (d) => parse(d, 'YYYY-MM-DD HH') });
// 第二种
import { parse } from 'fecha';
// ...
chart
.line()
// ...
.encode('x', (d) => parse(d.hour, 'YYYY-MM-DD HH'))
.encode('tooltip', 'hour'); // 指定 tooltip 的数据
我觉得别支持type time timecat了，完全没必要，就当普通的字符串处理得了，我们自己用labelFormat 格式化也简单啊，方式太多复杂死了， 话说我用了你给的解决方法，tooltip又不显示完整信息了，然后又没办法定义
timecat 目前已经没有了，time 主要增对非均匀分布的数据。给定以下的数据：
const data = [
{ hour: '2022-02-03', value: 1 },
{ hour: '2022-02-04', value: 3},
{ hour: '2022-02-010', value: 2 },
];
如果使用字符串会出现以下的问题：
chart
.line()
.data(data)
.encode('x', 'hour')
.encode('y', 'value');
chart.render();
如果使用 time，那么效果如下：
chart
.line()
.data(data)
.encode('x', (d) => new Date(d.hour))
.encode('y', 'value')
.axis('x', { tickCount: 5 });
chart.render();
IssueHunt