我有一个通过Google Chart JavaScript库生成的Dual-Y图表。
链接到我在JSFiddle上的图表:https ://jsfiddle.net/fzmjd593/
和代码:
google.charts.load('current', {'packages':['line', 'corechart'], 'callback': drawChart});
function drawChart() {
var date = new Date();
var file_data = "00:00:01 0 22.6 C 40.2 %\n00:01:01 0 22.6 C 40.1 %";
var items = file_data.split("\n");
var array = [];
for (var i = 0; i < items.length - 1; i++) {
var row_items = items[i].split(" ");
var d = new Date(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + row_items[0]);
array.push([d, Number(row_items[2]), Number(row_items[4])])
}
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', "Temperature [C]");
data.addColumn('number', "Relative humidity [%]");
data.addRows(array);
var materialOptions = {
chart: {
},
series: {
0: { axis: 'Temps' },
1: { axis: 'Humidity' }
},
axes: {
y: {
Temps: { label: 'Temperature [C]' },
Humidity: { label: 'Relative humidity [%]' }
}
}
};
var materialChart = new google.charts.Line(document.getElementById('chart_div'));
materialChart.draw(data, materialOptions);
}
这是Dual-Y图表示例的稍作修改的版本。
问题是它在PC(任何浏览器),Android(已在Chrome上测试)上正确显示,但是对于iOS设备(iPad / iPhone)却未同时显示Safari和Chrome图表行:iPad屏幕截图
您知道为什么它可能会这样工作吗?
每当我看到这样的问题,在ios中,它都归结为日期格式/构造函数
在为每一行建立日期时尝试使用其他构造函数...
以下代码段使用以下构造函数...
new Date(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]]);
google.charts.load('current', {'packages':['line', 'corechart'], 'callback': drawChart});
function drawChart() {
var date = new Date();
var file_data = "00:00:01 0 22.6 C 40.2 %\n00:01:01 0 22.6 C 40.1 %\n00:02:01 0 22.7 C 40.1 %\n00:03:01 0 22.6 C 40.2 %\n00:04:01 0 22.6 C 40.2 %\n00:05:01 0 22.6 C 40.2 %\n00:06:01 0 22.6 C 40.2 %\n00:07:01 0 22.7 C 40.2 %\n00:08:01 0 22.6 C 40.2 %\n00:09:01 0 22.6 C 40.1 %\n00:10:01 0 22.6 C 40.2 %\n00:11:01 0 22.6 C 40.1 %\n00:12:02 0 22.6 C 40.1 %\n00:13:01 0 22.6 C 40.1 %\n00:14:01 0 22.6 C 40.2 %\n";
var items = file_data.split("\n");
var array = [];
for (var i = 0; i < items.length - 1; i++) {
var row_items = items[i].split(" ");
var tod = row_items[0].split(":");
var d = new Date(date.getFullYear(), date.getMonth(), date.getDate(), parseInt(tod[0]), parseInt(tod[1]), parseInt(tod[2]));
var tod2 = [Number(tod[0] - 1), Number(tod[1]), Number(tod[2])];
array.push([d, Number(row_items[2]), Number(row_items[4])])
}
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', "Temperature [C]");
data.addColumn('number', "Relative humidity [%]");
data.addRows(array);
var materialOptions = {
chart: {
},
series: {
0: { axis: 'Temps' },
1: { axis: 'Humidity' }
},
axes: {
y: {
Temps: { label: 'Temperature [C]' },
Humidity: { label: 'Relative humidity [%]' }
}
}
};
var materialChart = new google.charts.Line(document.getElementById('chart_div'));
materialChart.draw(data, materialOptions);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 100%"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句