Google Charts 散点图适用于 Chrome Macbook，但不适用于 Chrome iPhone
Posted
技术标签:
【中文标题】Google Charts 散点图适用于 Chrome Macbook，但不适用于 Chrome iPhone【英文标题】：Google Charts scatter plots work on Chrome Macbook but not on Chrome iPhone 【发布时间】：2018-05-28 01:26:06 【问题描述】：救命！
一直在网上搜索，试图弄清楚为什么下面的图表会通过 Chrome、Firefox 甚至 IE 在笔记本电脑或台式机上显示，但在 iPhone 8 Plus Chrome 上却不能显示？提前谢谢！
适用于 Macbook Chrome： Macbook ios Chrome screenshot
甚至 Macbook 的 Chrome 开发工具也使用移动视图： Macbook iOS Chrome Mobile Dev Tools screenshot
但在 iPhone 8 Plus 上查看时不在 Chrome 浏览器中？ Individual data points on chart aren't shown mobile screenshot
代码在这里：
<!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 />
<h4 id='1Bed'>1 Bedroom Prices</h4>
<div id='scatterchart1' style="width: 800px; height: 500px;"></div><br />
<h4 id='2Bed'>2 Bedroom Prices</h4>
<div id='scatterchart2' style="width: 800px; height: 500px;"></div><br />
</p>
</body>
【问题讨论】：
【参考方案1】：请参阅documentation ...特别是方法getChartLayoutInterface，以检查图表是否由于错误的测量而被渲染到可见视口之外，从而导致错误的定位。此外，移动浏览器可能会触发具有不同名称（如预期）的 DOM 事件，这需要映射到图表的事件...图表是否会触发 ready 或 error活动？？
屏幕截图看起来并不完全像不支持 SVG。
【讨论】：
抱歉，我不清楚您的建议。我是否需要将每个图表设置为特定的视觉边界，以便通过您提到的功能在浏览器上显示？ 如果图表是在画布的视觉边界内绘制的，您必须检查（尚未调整任何内容）；使用 Chrome 调试桥，以便调试移动浏览器；它是chrome://inspect - 在连接数据线时...另一种可能性是事件，其中一个可能无法在浏览器上正确触发。使用调试桥都可以调试，然后修复。
也许你可以给我指出一篇文章，有人可以做到以上几点？如果图表没有在可视画布中绘制，我没有看到任何关于这个主题的可理解文档，或者如何在 JS 中更正它。谢谢！
@ZacharyOliver 我已经给你指出了一个 URL，它通常“有所有的答案”......这里解释得更好：developers.google.com/web/tools/chrome-devtools/… 我想这应该适用于 Chrome iPhone 也一样。关键是需要特殊的硬件来重现“您的问题” - 因此，有人会尝试为您重现和修复它的可能性很低。对图表组件提交错误可能是另一种选择。以上是关于Google Charts 散点图适用于 Chrome Macbook，但不适用于 Chrome iPhone的主要内容，如果未能解决你的问题，请参考以下文章
R语言可视化：散点图散点图和折线图（line charts）3D散点图旋转3D散点图气泡图corrgram包可视化相关性矩阵马赛克图（ Mosaic plots）hexbin密度图
html D3byEX 6.1：散点图（适用于D3.js v4）
Google Charts：在相同的“X”值上绘制多个“Y”值
R语言使用plot函数和lines函数可视化并排的散点图和折线图（line charts）如果把从左到右移动的散点图中的点连接起来，你就有了一个线图