react-google-charts 时间线组件多设备无法正常显示问题咨询
react-google-charts Timeline跨浏览器渲染异常排查解决
- 优先验证日期解析兼容性:Chrome对非标准日期字符串做了额外解析兼容,而Safari、Firefox、iOS端所有浏览器(包括iOS版Chrome,内核强制为WebKit)遇到不符合ISO 8601规范的日期字符串会直接返回
Invalid Date,和你收到的Safari无效日期提示完全对应。你可以在异常浏览器控制台执行new Date(你业务中使用的日期字符串),返回Invalid Date即可确认问题根因。 - 统一修正日期构造逻辑:不要使用
YYYY-MM-DD HH:MM:SS这类带空格的非标准字符串构造日期,两种兼容方案二选一:- 将所有日期字符串转换为ISO 8601标准格式,例如
YYYY-MM-DDTHH:MM:SSZ(注意中间的T分隔符和末尾的时区标识) - 直接使用多参数方式构造日期:
new Date(年, 月索引, 日, 时, 分, 秒),注意月份计数从0开始
- 将所有日期字符串转换为ISO 8601标准格式,例如
- 异常报错同步修复:你看到的
undefined is not an object (evaluating 'Dygraph.TICK_PLACEMENT[a].datefield')报错,本质是非法日期值传入后,底层Dygraph库读取日期属性的操作触发的异常,日期格式问题修复后该报错会同步消失,时间线即可正常渲染。
内容的提问来源于stack exchange,提问作者smabbett
相关产品推荐
相关产品推荐

