2015-05-20 2 views
1

В настоящее время я создаю приложение с использованием cordova и ChartJS. Я представляю диаграмму пончика, и она отлично работает в эмуляторе, но когда я прихожу, чтобы протестировать приложение на ipad/ipod/iphone диаграмма не отображает.Диаграмма JS не рендеринг на устройствах iOS

function renderMainClock(hourId) { 

     var clockData = gVMainClockData[hourId - 1]; 
     var ctx = document.getElementById("main-clock").getContext("2d"); 
     window.mainClock = new Chart(ctx).Doughnut(clockData, {responsive:true}); 

     alert(ctx); 

    } 

Предупреждение вызывается в эмуляторе, но никогда не вызывается, когда оно запускается на устройстве iOS.

Кто-нибудь знает, в чем проблема?

Вот мой index.html тоже:

<!DOCTYPE html> 

<html> 


    <head> 

     <link rel="stylesheet" type="text/css" href="css/materialize.min.css" media="screen,projection"/> 
     <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/> 
     <link rel="stylesheet" type="text/css" href="css/index.css"/> 



     <title>NUH Nursing Activity</title> 

    </head> 

    <body> 

     <!-- Top Bar --> 
     <div id="top-bar"></div> 

     <!-- Navigation --> 
     <div class=""> 
      <nav> 
       <div class="nav-wrapper blue darken-4"> 
        <a href="#" class="brand-logo">NUH Nursing Activity</a> 
        <ul class="right"> 
         <li><a href="#"><i class="mdi-action-info"></i></a></li> 
        </ul> 
       </div> 
      </nav> 
     </div> 

     <div class="container-custom"> 

      <div class="center small-circle-padding"> 
       <div id="small-circles"></div> 
      </div> 

      <div id="canvas-holder" class="center"> 
       <canvas id="main-clock"></canvas> 
      </div> 

      <div class="card red darken-1"> 
       <div class="card-content white-text"> 
        <p>Current Shift Hour: 1</p> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col s5"> 
        <a class="btn blue darken-2">Add</a> 
       </div> 
       <div class="col s7 right"> 
        <a class="btn blue darken-4 right disabled">Finish</a> 
       </div> 
      </div> 


     </div> 

     <!-- Include Relevant JavaScript --> 
     <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> 
     <script type="text/javascript" src="cordova.js"></script> 

     <script type="text/javascript" src="js/globalVariables.js"></script> 
     <script tyoe="text/javascript" src="js/materialize.min.js"></script> 

     <script type="text/javascript" src="js/chart.min.js"></script> 

     <script type="text/javascript" src="js/appStart.js"></script> 
     <script type="text/javascript" src="js/mainClock.js"></script>  

    </body> 


</html> 

ответ

0

Пытались ли вы комментируя следующий код под Chart.js?

helpers.retinaScale(this.chart);

Это, как правило, чтобы исправить эту проблему.

0

Это так глупо, но удаление [] из моих опций backgroundColor и borderColor исправило проблему разлома, которую я имел.

Смежные вопросы