Помогите!
Обыскивали интернет, пытаясь выяснить, почему приведенные ниже графики будут отображаться на ноутбуке или настольном компьютере через Chrome, Firefox и даже IE, а не на iPhone 8 Plus Chrome?Заранее спасибо!
Работает на Macbook Chrome: Снимок экрана Macbook iOS Chrome
Даже инструменты Macbook Chrome Dev с использованием мобильного представления: Macbook iOS Chrome Mobile DevСнимок экрана инструментов
Но не в браузере Chrome при просмотре на iPhone 8 Plus? Отдельные точки данных на графике не отображаются с экрана мобильного устройства
Код здесь:
<!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>