谷歌图表不显示在 iOS 设备上

Question

我有一个通过 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);
  }

这是双 Y 图表示例的略微修改版本。

问题是它在 PC（任何浏览器）、Android（在 Chrome 上测试）上正确显示，但对于 iOS 设备（iPad/iPhone），Safari 和 Chrome 图表线均未显示：IPad screenshot

你知道为什么它会这样工作吗？

Answer 1

每次我看到这样的问题，对于 ios，它都归结为日期格式/构造函数

在为每一行构建日期时尝试使用不同的构造函数...

下面的sn-p使用下面的构造函数...

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>