Google Charts散点图在Macbook Chrome正常，iPhone 8 Plus Chrome无数据点

大家好，我碰到了一个Google Charts的兼容性问题，想请各位帮忙排查下：

我的散点图在绝大多数设备和浏览器里都能正常渲染，但唯独在iPhone 8 Plus的Chrome浏览器中看不到任何数据点——图表的标题、坐标轴都能显示，就是本该有数据点的区域是空白的。

正常显示的场景： #

• 笔记本/台式机上的Chrome、Firefox、IE浏览器
• Macbook的Chrome浏览器
• Macbook Chrome DevTools的移动端模拟视图（切换到移动端模式后数据点依然正常展示）

异常场景： #

• iPhone 8 Plus的Chrome浏览器：仅展示图表框架、标题和坐标轴，无任何数据点

截图说明： #

Macbook Chrome正常状态：散点图完整呈现所有日期对应的价格数据点，布局清晰
Macbook Chrome DevTools移动端模拟：模拟移动端界面时，数据点全部正常显示
iPhone 8 Plus Chrome异常状态：图表结构完整，但数据点完全缺失，图表区域为空白

相关代码： #

<!DOCTYPE html> <html lang="en"> <head> <!-- Google Charts loader --> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> </script> <!-- Google Charts creator and renderer --> <script type="text/javascript"> google.charts.load('current', {'packages': ['scatter']}); google.charts.setOnLoadCallback(drawCharts); function drawCharts() { drawChart0(); drawChart1(); drawChart2(); }; function drawChart0 () { var data0 = new google.visualization.DataTable(); data0.addColumn('date', 'Date'); data0.addColumn('number', 'Price'); data0.addRow([new Date('2018-03-01 06:57:31'),1450]); data0.addRow([new Date('2018-03-01 08:35:31'),1070]); data0.addRow([new Date('2018-03-01 09:27:50'),1454]); data0.addRow([new Date('2018-03-01 09:29:54'),1475]); data0.addRow([new Date('2018-03-01 10:48:23'),1099]); data0.addRow([new Date('2018-03-01 10:56:35'),1195]); data0.addRow([new Date('2018-03-01 11:01:04'),1375]); data0.addRow([new Date('2018-03-01 11:01:10'),1399]); data0.addRow([new Date('2018-03-01 11:02:15'),1175]); var options = { chart: { title: 'Studio Rent Prices' }, hAxis: {title: 'Date of Price'}, vAxis: {title: 'Price ($)'} }; var chart0 = new google.charts.Scatter(document.getElementById('scatterchart0')); chart0.draw(data0, google.charts.Scatter.convertOptions(options)); }; function drawChart1 () { var data1 = new google.visualization.DataTable(); data1.addColumn('date', 'Date'); data1.addColumn('number', 'Price'); data1.addRow([new Date('2018-02-27 13:08:49'),1550]); data1.addRow([new Date('2018-02-27 14:14:46'),1550]); data1.addRow([new Date('2018-03-01 11:02:11'),1875]); data1.addRow([new Date('2018-03-01 11:56:38'),1875]); data1.addRow([new Date('2018-03-01 12:54:21'),2310]); data1.addRow([new Date('2018-03-01 13:11:34'),1834]); data1.addRow([new Date('2018-03-01 14:10:52'),1709]); data1.addRow([new Date('2018-03-01 15:04:39'),1595]); data1.addRow([new Date('2018-03-01 15:05:36'),1715]); var options = { chart: { title: 'One Bedroom Rent Prices' }, hAxis: {title: 'Date of Price'}, vAxis: {title: 'Price ($)'} }; var chart1 = new google.charts.Scatter(document.getElementById('scatterchart1')); chart1.draw(data1, google.charts.Scatter.convertOptions(options)); }; function drawChart2 () { var data2 = new google.visualization.DataTable(); data2.addColumn('date', 'Date'); data2.addColumn('number', 'Price'); data2.addRow([new Date('2018-03-01 07:15:20'),1550]); data2.addRow([new Date('2018-03-01 09:37:37'),2164]); data2.addRow([new Date('2018-03-01 11:05:15'),1850]); data2.addRow([new Date('2018-03-01 11:15:27'),2150]); data2.addRow([new Date('2018-03-01 13:13:26'),2265]); data2.addRow([new Date('2018-04-02 15:46:59'),1495]); data2.addRow([new Date('2018-04-05 08:02:41'),1650]); data2.addRow([new Date('2018-04-05 09:45:10'),2919]); data2.addRow([new Date('2018-04-06 17:17:32'),1725]); data2.addRow([new Date('2018-04-09 09:58:12'),1550]); data2.addRow([new Date('2018-04-09 14:17:45'),1995]); data2.addRow([new Date('2018-04-12 10:57:25'),2395]); data2.addRow([new Date('2018-04-16 07:56:38'),1550]); data2.addRow([new Date('2018-04-19 09:37:20'),1850]); var options = { chart: { title: 'Two Bedroom Rent Prices' }, hAxis: {title: 'Date of Price'}, vAxis: {title: 'Price ($)'} }; var chart2 = new google.charts.Scatter(document.getElementById('scatterchart2')); chart2.draw(data2, google.charts.Scatter.convertOptions(options)); }; </script> <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'> <style> body { font-family: 'Lato'; font-size: 22px; margin: 10px; margin-left: 40px; } </style> <meta charset="UTF-8"> <title>Rent Price Details</title> </head> <body> <h2>Rent Details</h2> <h3 id='ToC'>Table of Contents</h3> <ul> <li><a href='#Studio' target='_self'>Studio Prices</a></li> <li><a href='#1Bed' target='_self'>1 Bedroom Prices</a></li> <li><a href='#2Bed' target='_self'>2 Bedroom Prices</a></li> </ul> <h4 id='Studio'>Studio Prices</h4> <div id='scatterchart0' style="width: 800px; height: 500px;"></div><br >

麻烦各位帮忙看看可能是什么原因导致的，谢谢大家！

内容的提问来源于stack exchange，提问作者Zachary Oliver