iOS 기기에 Google 차트가 표시되지 않습니다.

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 (브라우저), 안드로이드 (크롬에서 테스트)에서 제대로 표시되는 것을이지만, 사파리와 크롬 차트 라인에 모두 iOS 기기 (아이 패드/아이폰)에 대해 표시되지 않습니다 IPad screenshot

왜 이런 식으로 작동하는지 알겠습니까?

Answer 1

매번 내가이 같은 문제를 본 적이 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>

는 조각을 사용하여 다음과 같은