@@ -99,40 +99,61 @@ chart.options({
9999});
100100```
101101
102- ## 字符串日期需显式声明 type
102+ ## 字符串日期(推荐转为 Date 对象)
103+
104+ G2 v5 对 ` YYYY-MM-DD ` 格式的字符串有一定自动识别能力,但行为依赖内部推断,** 不稳定** 。
105+ 推荐在数据预处理阶段统一转为 ` Date ` 对象,避免歧义:
103106
104107``` javascript
105- // 数据中日期是字符串格式
106- const data = [
108+ // ✅ 推荐:预处理时转为 Date 对象
109+ const rawData = [
107110 { date: ' 2024-01-01' , value: 100 },
108111 { date: ' 2024-02-01' , value: 130 },
109112];
113+ const data = rawData .map (d => ({ ... d, date: new Date (d .date ) }));
110114
111115chart .options ({
112116 type: ' line' ,
113117 data,
114118 encode: { x: ' date' , y: ' value' },
115- scale: {
116- x: { type: ' time' }, // 必须显式声明,否则被当作 ordinal scale
117- },
119+ // 无需 scale.x.type,G2 自动识别 Date 对象为 Time Scale
118120});
119121```
120122
123+ ** 不要** 在字符串日期上显式写 ` scale: { x: { type: 'time' } } ` ,这是多余的配置,
124+ 且在某些场景(如 fold 后数据类型变化)会引发渲染异常。
125+
121126## 常见错误与修正
122127
123- ### 错误 1:日期字符串未声明 time scale 导致排序错误
128+ ### 错误 1:显式声明 type: 'time'(不必要且有风险)
124129``` javascript
125- // ❌ 错误:字符串日期不声明 type: 'time',会被当作分类数据,顺序可能错乱
130+ // ❌ 不推荐:在字符串日期上显式写 type: 'time'
131+ chart .options ({
132+ type: ' line' ,
133+ data: [{ date: ' 2024-01-01' , value: 100 }],
134+ encode: { x: ' date' , y: ' value' },
135+ scale: { x: { type: ' time' } }, // ❌ 多余,可能引发异常
136+ });
137+
138+ // ✅ 正确:转为 Date 对象,让 G2 自动处理
139+ const data = rawData .map (d => ({ ... d, date: new Date (d .date ) }));
140+ chart .options ({
141+ type: ' line' ,
142+ data,
143+ encode: { x: ' date' , y: ' value' },
144+ });
145+ ```
146+
147+ ### 错误 2:数据乱序导致折线错乱
148+ ``` javascript
149+ // ❌ 错误:数据顺序混乱,折线会连错
126150const data = [
127- { date: ' 2024-03-01' , value: 110 },
128- { date: ' 2024-01-01' , value: 100 }, // 数据无序
151+ { date: new Date ( ' 2024-03-01' ) , value: 110 },
152+ { date: new Date ( ' 2024-01-01' ) , value: 100 }, // 时间倒序
129153];
130- chart .options ({ type: ' line' , data, encode: { x: ' date' , y: ' value' } });
131- // 结果:x 轴顺序是数据原始顺序,不按时间排序
132-
133- // ✅ 方案 1:将字符串转为 Date 对象(推荐)
134- const processedData = data .map (d => ({ ... d, date: new Date (d .date ) }));
135154
136- // ✅ 方案 2:显式声明 time scale
137- chart .options ({ scale: { x: { type: ' time' } } });
155+ // ✅ 正确:按时间排序后再传入
156+ const data = rawData
157+ .map (d => ({ ... d, date: new Date (d .date ) }))
158+ .sort ((a , b ) => a .date - b .date );
138159```
0 commit comments